Ich führe eine Animation für einige Elemente aus, die auf festgelegt sindopacity: 0; im CSS. Die Animationsklasse wird auf Click angewendet und ändert mithilfe von Keyframes die Deckkraft von0 zu1 (unter anderem).

Wenn die Animation beendet ist, kehren die Elemente leider zu zurückopacity: 0 (in Firefox und Chrome). Mein natürlicher Gedanke wäre, dass animierte Elemente den Endzustand beibehalten und ihre ursprünglichen Eigenschaften überschreiben. Ist das nicht wahr? Und wenn nicht, wie kann ich das Element dazu bringen?

Der Code (Präfixversionen nicht enthalten):

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