Mantener el estado final al final de una animación CSS3

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