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>