javascript - keyframes - efectos bootstrap

Animaciones de fotogramas CSS3: finaliza y permanece en el último fotograma

Question

Me he encontrado con algunas dificultades al tratar de reproducir una animación de fotograma clave de CSS3 y tener el elemento relevante pegado en el último cuadro una vez que la animación se haya completado. A mi entender, la propiedad que tengo que establecer para que esto funcione debe ser animation-fill-mode, que debería tener el valor de forwards; esto no hace nada.

.animatedSprite { 
    .animation-name: sprite;
    .animation-duration: .5s;
    .animation-iteration-count: 1;
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards;
    //Vendor prefixes... }

Esto solo reproducirá la animación una vez y luego volverá al primer fotograma. Encontré un ejemplo de animaciones de fotogramas clave en JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ), y cambiar el modo de relleno a reenviar y establecer el recuento de iteraciones en 1 tampoco haría nada allí.

Cualquier ayuda sería muy apreciada.

Answer 1

Cambie ''infinito'' a ''1'' en el CSS, esto lo arregla para mí

Answer 2

El siguiente código hará que la transición permanezca en el último fotograma:

-webkit-timing-function:ease;
-webkit-iteration-count:1;

Answer 3

animation-fill-mode:forwards es la propiedad correcta de usar. Parece que no funciona porque el fondo de la imagen de sprite tiene una background-repeat:repeat predeterminada de background-repeat:repeat , por lo que el último fotograma que crees que estás viendo es en realidad el primer fotograma de la imagen de fondo repetida.

Si configura

background: url("http://files.simurai.com/misc/sprite.png") no-repeat

animation: play .8s steps(10) forwards;

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

y ejecutar la demostración, el marco final ahora está en blanco, por lo que los forwards hacen lo que deberían. La segunda parte de la solución es cambiar el final y steps propiedades de CSS para colocar el fondo correctamente. Entonces realmente necesitamos que el fondo se detenga a -450px y use 9 pasos.

-webkit-animation: play .8s steps(9) forwards;

@keyframes play {
    from { background-position: 0; }
    to { background-position: -450px; }
}

Ver demostración : solo solucioné las propiedades de Chrome. También aquí está la imagen de muestra en caso de que el original desaparezca.

.hi {
    width: 50px;
    height: 72px;
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
    
    -webkit-animation: play .8s steps(9) forwards;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(9) forwards;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

<div class="hi"></div>