<p>Ich animiere einige Elemente, die in CSS auf <code>opacity: 0;</code> eingestellt sind. Auf das onClick-Ereignis wird mithilfe von Keyframes eine Animationsklasse angewendet, die die Deckkraft von <code>0</code> ändert (und einige andere Änderungen). </p> <p>Leider kehrt das Element am Ende der Animation in den Zustand <code>Opazität zurück: 0</code> (sowohl in Firefox als auch in Chrome). Mein Instinkt ist, dass animierte Elemente in ihrem endgültigen Zustand bleiben und ihre ursprünglichen Eigenschaften überschreiben. Ist das nicht wahr? Wenn nicht, wie kann ich das Element in seinem Endzustand halten? </p> <p>Code (ohne Präfixversionen): </p> <pre class="brush:php;toolbar:false;">@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 } }</pre> <p><br /></p>

animation: bubble 2s linear 0.5s 1 normal forwards;

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

normal | reverse | alternate | alternate-reverse

animation: bubble 1.0s forwards;