保持CSS动画在结束时的最终状态

Question

我正在对一些在CSS中设置为opacity: 0;的元素运行动画。动画类被应用于onClick事件，使用关键帧，它将不透明度从0变为1（以及其他一些变化）。

不幸的是，当动画结束时，元素会回到opacity: 0的状态（在Firefox和Chrome中都是如此）。我本能地认为动画元素会保持最终状态，覆盖它们的原始属性。这不是真的吗？如果不是，我该如何使元素保持最终状态？

代码（不包括前缀版本）：

@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