保持CSS动画在结束时的最终状态
P粉950128819
2023-08-20 18:36:55
<p>我正在对一些在CSS中设置为<code>opacity: 0;</code>的元素运行动画。动画类被应用于onClick事件，使用关键帧，它将不透明度从<code>0</code>变为<code>1</code>（以及其他一些变化）。</p>
<p>不幸的是，当动画结束时，元素会回到<code>opacity: 0</code>的状态（在Firefox和Chrome中都是如此）。我本能地认为动画元素会保持最终状态，覆盖它们的原始属性。这不是真的吗？如果不是，我该如何使元素保持最终状态？</p>
<p>代码（不包括前缀版本）：</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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果您使用更多的动画属性，则可以使用简写方式：
这样设置：
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