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

我正在一些设置为

opacity:0的元素上运行动画。动画类应用于单击，并使用关键帧将不透明度从
0
更改为
1
（除其他外）

不幸的是，动画结束后，元素返回到
不透明度：0
（在Firefox和Chrome中）。我的自然想法是，动画元素保持最终状态，覆盖其原始属性。这不是真的吗？如果没有，我如何让元素这样做

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

尝试添加
动画填充模式：向前。例如：

-webkit动画：冒泡1.0s向前；/*对于不太现代的浏览器*/
动画：气泡向前1.0秒；
如果要使用更多的动画属性，简写为：

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

这使得：


气泡
动画名称
2s
持续时间
线性
定时功能
0.5s
延迟
1
迭代计数（可以是“
无限的”
”）
正常方向
方向
forwards
fill模式（如果您希望兼容使用结束位置作为最终状态[这是为了支持关闭动画的浏览器]{并且只回答标题，而不回答您的特定案例}，请设置“backward”）
如果不使用速记版本：确保
动画填充模式：forwards
在动画声明之后，否则它将不起作用

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

使用
动画填充模式：向前

animation-fill-mode: forwards;

元素将保留由最后一个关键帧设置的样式值（取决于动画方向和动画迭代次数）

注意：Internet Explorer 9和早期版本不支持@keyframes规则

工作示例


div{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
-webkit动画：mymove 3ss forwards；/*Safari 4.0-8.0*/
动画：气泡3s前进；
/*动画名称：泡泡；
动画持续时间：3s；
动画填充模式：正向*/
}
/*狩猎*/
@-webkit关键帧气泡{
0%{变换：比例（0.5）；不透明度：0.0；左：0}
50%{变换：比例（1.2）；不透明度：0.5；左：100px}
100%{变换：比例（1.0）；不透明度：1.0；左：200px}
}
/*标准语法*/
@关键帧气泡{
0%{变换：比例（0.5）；不透明度：0.0；左：0}
50%{变换：比例（1.2）；不透明度：0.5；左：100px}
100%{变换：比例（1.0）；不透明度：1.0；左：200px}
}
关键帧
我在使用
转发时遇到了一个问题：至少在Chrome中，即使动画结束后，渲染器仍在占用图形资源，使应用程序的响应性降低

一种不会导致此问题的方法是使用
EventListener

CSS动画会发出事件，因此可以在动画结束时使用事件进行干预

CSS

。淡入{
动画：Fadein2S；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

JavaScript

const-element=document.getElementById（“要设置动画的元素”）；
元素。addEventListener（“animationend”，（）=>{
//在此处设置最终状态。例如：
元素。样式[“不透明度”]=1；
}，{once:true}）；

选项
one:true
告诉引擎在事件监听器执行后删除它，让应用程序保持新鲜和干净

我创建了一个示例来演示它是如何工作的。
是的，就是这样。我会在可能的时候检查你的答案。如果有任何CSS负责人想评论这一要求背后的逻辑，我很想知道！您可以在这里阅读有关动画填充模式属性的内容-希望对您有所帮助@Dan
animation fill mode
属性的
forwards
值确保元素在动画结束后保持动画的最后一个关键帧状态。例如，如果您的动画将
宽度从0更改为100px，则此属性确保动画结束后元素的宽度保持为100px。不要忘记在
@keyframe
中指定
100%/到
点，否则它将不起作用。动画填充模式：forwards也为我完成了此操作，但仅在添加“！重要提示“规则的必要性”我将发布我自己的重复通知：至少我的标题更有教育意义！这个可能的副本比公认的答案更正确、更完整，因为它不适用于我的用例。
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

animation-fill-mode: forwards;