Estoy ejecutando una animación en algunos elementos configurados opacity: 0;
en CSS. La clase de animación se aplica en Click, y, usando fotogramas clave, cambia la opacidad de 0
a 1
(entre otras cosas).
Desafortunadamente, cuando termina la animación, los elementos vuelven a 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. ¿No es esto cierto? 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; }
}