Estoy ejecutando una animación en algunos elementos que están configurados en opacity: 0; en el CSS. La clase de animación se aplica enClick y, utilizando fotogtwigs clave, cambia la opacidad de 0 a 1 (entre otras cosas).
Lamentablemente, cuando termina la animación, los elementos vuelven a la opacity: 0 (tanto en Firefox como en Chrome). Mi pensamiento natural sería que los elementos animados mantienen el estado final, anulando sus propiedades originales. ¿Esto no es verdad? Y si no, ¿cómo puedo obtener el elemento para hacerlo?
El código (versiones prefijadas no incluidas):
@keyframes bubble { 0% { transform:scale(0.5); opacity:0.0; } 50% { transform:scale(1.2); opacity:0.5; } 100% { transform:scale(1.0); opacity:1.0; } }
Prueba agregar animation-fill-mode: forwards; . Por ejemplo, así:
animation: bubble 1.0s forwards; -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
Si está utilizando más atributos de animación, la taquigrafía es:
animation: bubble 2s linear 0.5s 1 normal forwards;
durante 2 s de duración, función de temporización lineal, retardo de 0,5 s, recuento de iteraciones, dirección normal, modo de llenado directo