在CSS3动画结束时保持最终状态
编程 | 2020-12-29 | 编程黑洞网 | | 964 人阅读
我正在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; }
}
评论
我将发布自己的重复通知:stackoverflow.com/questions/9196694/css3-animation-scale至少我的标题更具指导意义!
CSS3 Animate的可能重复项:动画运行后如何使对象不还原到其初始位置?
#1 楼
尝试添加
animation-fill-mode: forwards;
。例如这样的例子:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
#2 楼
如果使用更多动画属性,则简写为:
animation: bubble 2s linear 0.5s 1 normal forwards;
这给出:
2s
持续时间
linear
计时功能
0.5s
延迟
1
迭代计数(可以为“无限”)
normal
方向
forwards
填充模式(如果您希望具有兼容性,则可以将结束位置用作最终状态(这是为了支持已关闭动画的浏览器){并且仅回答标题,而不回答您的具体情况),请设置'backwards')
#3 楼
如果不使用简短版本,请确保
animation-fill-mode: forwards
在动画声明之后,否则将不起作用...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
#4 楼
使用
动画填充模式:前进;
animation-fill-mode: forwards;
元素将保留由最后一个关键帧设置的样式值(取决于动画方向)和动画迭代计数)。
注意:Internet Explorer 9和更早版本不支持@keyframes规则。
工作示例
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
@-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
@keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
评论
是的。如果可以的话,将检查您的答案。如果有任何CSS负责人想评论所需要的逻辑,我很想知道!
–丹
2012年10月20日在18:04
您可以在此处了解有关animation-fill-mode属性的信息-dev.w3.org/csswg/css3-animations/#animation-fill-mode-property希望有所帮助!
–克里斯托弗·维兰德(Christofer Vilander)
2012年10月20日在18:51
@Dan animation-fill-mode属性的forwards值可确保元素在动画结束后保留动画的最后一个关键帧状态。例如,如果您的动画将宽度从0更改为100px,则此属性可确保元素在动画结束后仍保持100px的宽度。
–法尔扎德YZ
16-2-17在15:23
不要忘记指定100%/指向@keyframe,否则它将无法正常工作。
– Tomasz Mularczyk
17年6月20日在18:33
animation-fill-mode:forwards也为我完成了窍门,但仅在规则中添加了“!important”命令后
– shayuna
18 Mar 27 '18在8:12