Estou executando uma animação em alguns elementos que estão definidos paraopacity: 0; no CSS. A classe de animação é aplicada ao onClick e, usando quadros-chave, altera a opacidade de0 para1 (entre outras coisas).

Infelizmente, quando a animação termina, os elementos voltam aopacity: 0 (no Firefox e no Chrome). Meu pensamento natural seria que os elementos animados mantivessem o estado final, sobrepondo-se às suas propriedades originais. Isso não é verdade? E se não, como posso obter o elemento para o fazer?

O código (versões prefixadas não incluídas):

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