Crossfade dos imágenes repetidamente después de mostrar durante 10 segundos

Intento usar HTML y CSS para fundir dos imágenes después de mostrarlas durante 10 segundos cada una. Quiero que esto se repita constantemente.

Aquí está mi 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; } } 

Nunca he usado animaciones CSS antes, así que estoy un poco confundido. Solo se muestra la imagen “inferior” y no sucede nada más.

¿Qué está pasando mal?

Aquí hay un ejemplo con 10s retraso y 1s duración de animación.

 #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; } }