Estoy ejecutando una animación en algunos elementos que están configurados paraopacity: 0; en el CSS. La clase de animación se aplica en clic y, utilizando fotogramas clave, cambia la opacidad de0 a1 (entre otras cosas).

Desafortunadamente, cuando la animación termina, los elementos vuelven aopacity: 0 (tanto en Firefox como en Chrome). Mi pensamiento natural sería que los elementos animados mantengan el estado final, anulando sus propiedades originales. ¿No es esto cierto? Y si no, ¿cómo puedo conseguir que el elemento lo haga?

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; }
}