Lassen Sie die CSS-Animation am Ende im Endzustand
P粉950128819
2023-08-20 18:36:55
<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>
如果您使用更多的动画属性，则可以使用简写方式：
这样设置：
bubble动画名称2s持续时间linear时间函数0.5s延迟1迭代次数（可以是 'infinite'）normal方向forwards填充模式（如果您希望兼容使用结束位置作为最终状态，请设置为 'backwards' [这是为了支持关闭动画的浏览器]{仅回答标题，而不是您的具体情况}）可用的时间函数：
可用的方向：
尝试添加
animation-fill-mode: forwards;。例如，可以像这样使用简写：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode