Detener una animación CSS3 en el último fotograma
Tengo una animación CSS3 de 4 partes que se reproduce al hacer clic, pero la última parte de la animación está destinada a eliminarla de la pantalla.
Sin embargo, siempre vuelve a su estado original una vez que ha jugado. Alguien sabe cómo puedo detenerlo en su último cuadro CSS (100%) , o cómo deshacerme de todo el div en el que se encuentra una vez que se ha reproducido.
@keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
Estas buscando:
animation-fill-mode: forwards;
Más información sobre MDN y lista de compatibilidad de navegadores en canIuse .
Si desea agregar este comportamiento a una animationdefinición de propiedad abreviada, el orden de las subpropiedades es el siguiente
animation-name- por defecto none
animation-duration- por defecto 0s
animation-timing-function- por defecto ease
animation-delay- por defecto 0s
animation-iteration-count- por defecto 1
animation-direction- por defecto normal
animation-fill-mode- necesitas configurar esto en forwards
animation-play-state- por defecto running
Por lo tanto, en el caso más común, el resultado será algo como esto
animation: colorchange 1s ease 0s 1 normal forwards;
Vea la documentación de MDN aquí
