Cambiar la imagen de fondo con animaciones CSS3

¿Por qué esto no está funcionando? ¿Qué estoy haciendo mal?

CSS

@-webkit-keyframes test { 0% { background-image: url('frame-01.png'); } 20% { background-image: url('frame-02.png'); } 40% { background-image: url('frame-03.png'); } 60% { background-image: url('frame-04.png'); } 80% { background-image: url('frame-05.png'); } 100% { background-image: url('frame-06.png'); } } div { float: left; width: 200px; height: 200px; -webkit-animation-name: test; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; } 

MANIFESTACIÓN

http://jsfiddle.net/hAGKv/

¡Gracias por adelantado!

La imagen de fondo no es una propiedad que se pueda animar: no se puede interpolar la propiedad.

En su lugar, intente colocar todas las imágenes una encima de la otra con la posición: absoluta, luego anime la opacidad de todas ellas en 0, excepto la que desee repetidamente.

Funciona en Chrome 19.0.1084.41 beta!

Entonces, en algún momento en el futuro, los fotogtwigs clave realmente podrían ser … ¡marcos!

Estás viviendo en el futuro;)

Esto es realmente rápido y sucio, pero hace el trabajo: jsFiddle

  #img1, #img2, #img3, #img4 { width:100%; height:100%; position:fixed; z-index:-1; animation-name: test; animation-duration: 5s; opacity:0; } #img2 { animation-delay:5s; -webkit-animation-delay:5s } #img3 { animation-delay:10s; -webkit-animation-delay:10s } #img4 { animation-delay:15s; -webkit-animation-delay:15s } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } 100% { } } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } 100% { } } 

Estoy trabajando en algo similar para mi sitio usando jQuery, pero la transición se desencadena cuando el usuario se desplaza por la página – jsFiddle

La función de temporización linear animará linealmente las propiedades definidas. Para la imagen de fondo parece tener este efecto de fundido / cambio de tamaño al cambiar los fotogtwigs de tu animación (no estoy seguro de si es un comportamiento estándar, me gustaría ir con el enfoque de @Chukie B).

Si usa la función de steps , se animará discretamente. Consulte la documentación de la función de temporización en MDN para obtener más detalles. Para su caso, haga así:

 -webkit-animation-timing-function: steps(1,end); animation-timing-function: steps(1,end); 

Vea este jsFiddle .

No estoy seguro si es un comportamiento estándar tampoco, pero cuando dices que solo habrá un paso, te permite cambiar el punto de partida en la sección @keyframes . De esta forma puedes definir cada fotogtwig de tu animación.

Necesitaba hacer lo mismo que usted y aterrizar en su pregunta. Terminé tomando la búsqueda sobre la función de pasos que leí a partir de aquí .

JSFiddle de mi solución en acción ( tenga en cuenta que actualmente funciona en Firefox, le permitiré agregar las líneas de navegación cruzada, tratando de mantener la solución limpia de desorden)

Primero creé una hoja de sprites que tenía dos marcos . Luego creé el div y lo puse como fondo, pero mi div es solo el tamaño de mi sprite (100px).

 
#cyclist { animation: cyclist 1s infinite steps(2); display: block; width: 100px; height: 100px; background-image: url('../images/cyclist-test.png'); background-repeat: no-repeat; background-position: top left; }

La animación está configurada para tener 2 pasos y hacer que todo el proceso tome 1 segundo.

 @keyframes cyclist { 0% { background-position: 0 0; } 100% { background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px } } 

Thiago mencionó anteriormente la función de pasos, pero pensé que elaboraría más al respecto. Cosas bastante simples e increíbles.

Al igual que lo mencionado anteriormente, no puede cambiar las imágenes de fondo en la animación. He encontrado la mejor solución para poner tus imágenes en una hoja de sprites, y luego animar cambiando la posición de fondo, pero si estás comstackndo para móvil, tus hojas de sprites están limitadas a menos de 1900×1900 px.

Puede usar la propiedad de posición de fondo animada y la imagen de sprite.

Necesitaba hacer lo mismo recientemente. Aquí hay una implementación simple

 #wrapper { width:100%; height:100%; position:relative; } #wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; } #wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } 
 

Funciona para mi. Observe el uso de background-image para la transición.

 #poster-img { background-repeat: no-repeat; background-position: center; position: absolute; overflow: hidden; -webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out; } 

Puedes seguir por este código:

 #cd{ position: relative; margin: 0 auto; height: 281px; width: 450px; } #cf img{ left: 0; position: absolute; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover{ opacity: 0; } 
 

Bueno, puedo cambiarlos en Chrome. Es simple y funciona bien en Chrome con las propiedades de -webkit css.