Дважды перекрестите два изображения после показа в течение 10 секунд

Я пытаюсь использовать HTML и CSS для кроссфейда двух изображений после их отображения по 10 секунд каждый. Я хочу, чтобы это повторялось постоянно.

Вот мой HTML:

CSS:

 #container { float: right; height: 246px; position:relative; width: 230px; } #container img { height: 246px; width: 230px; left:0; opacity: 0; position:absolute; } #container img.bottom { opacity: 1; } #container img.top { animation-duration: 0.1s; animation-name: crossFade; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes crossFade { from { opacity: 0; } to { opacity: 1; } } направо #container { float: right; height: 246px; position:relative; width: 230px; } #container img { height: 246px; width: 230px; left:0; opacity: 0; position:absolute; } #container img.bottom { opacity: 1; } #container img.top { animation-duration: 0.1s; animation-name: crossFade; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes crossFade { from { opacity: 0; } to { opacity: 1; } } 

Я никогда не использовал анимацию CSS, прежде чем я немного запутался. Отображается только «нижнее» изображение, и ничего больше не происходит.

Что происходит не так?

Вот пример с задержкой 10s с и продолжительностью анимации 1s .

 #container { float: right; height: 246px; position: relative; width: 230px; } #container img { height: 246px; width: 230px; left: 0; opacity: 0; position: absolute; } #container img.bottom { opacity: 1; } #container img.top { -webkit-animation: crossFade 11s infinite; animation: crossFade 11s infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } @-webkit-keyframes crossFade { 0% { opacity: 0; } 47.62% { opacity: 0; } 52.38% { opacity: 1; } 100% { opacity: 1; } } @keyframes crossFade { 0% { opacity: 0; } 47.62% { opacity: 0; } 52.38% { opacity: 1; } 100% { opacity: 1; } }