Lassen Sie die CSS-Animation am Ende im Endzustand

Question

Ich animiere einige Elemente, die in CSS auf opacity: 0; eingestellt sind. Auf das onClick-Ereignis wird mithilfe von Keyframes eine Animationsklasse angewendet, die die Deckkraft von 0 ändert (und einige andere Änderungen).

Leider kehrt das Element am Ende der Animation in den Zustand Opazität zurück: 0 (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?

Code (ohne Präfixversionen):

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

Answer 1

如果您使用更多的动画属性，则可以使用简写方式：

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

这样设置：

• bubble 动画名称
• 2s 持续时间
• linear 时间函数
• 0.5s 延迟
• 1 迭代次数（可以是 'infinite'）
• normal 方向
• forwards 填充模式（如果您希望兼容使用结束位置作为最终状态，请设置为 'backwards' [这是为了支持关闭动画的浏览器]{仅回答标题，而不是您的具体情况}）

可用的时间函数：

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

可用的方向：

normal | reverse | alternate | alternate-reverse

Answer 2

尝试添加 animation-fill-mode: forwards;。例如，可以像这样使用简写：

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode