我正在对一些在CSS中设置为opacity: 0;的元素运行动画。动画类被应用于onClick事件，使用关键帧，它将不透明度从0变为1（以及其他一些变化）。
不幸的是，当动画结束时，元素会回到opacity: 0的状态（在Firefox和Chrome中都是如此）。我本能地认为动画元素会保持最终状态，覆盖它们的原始属性。这不是真的吗？如果不是，我该如何使元素保持最终状态？
代码（不包括前缀版本）：
2
1460@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; }
}
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
如果您使用更多的动画属性，则可以使用简写方式：
这样设置：
bubble动画名称2s持续时间linear时间函数0.5s延迟1迭代次数（可以是 'infinite'）normal方向forwards填充模式（如果您希望兼容使用结束位置作为最终状态，请设置为 'backwards' [这是为了支持关闭动画的浏览器]{仅回答标题，而不是您的具体情况}）可用的时间函数：
可用的方向：