[英]CSS Animation not working properly
I have a very simple animation that fades out and shrinks a div
. 我有一个非常简单的动画,可以淡出并缩小
div
。
But the problem is that when the animation finishes it goes back to the start and stays there. 但是问题在于,动画结束时,它会回到起点并停留在该位置。
div { background-color: red; height: 80px; } .fade-out { animation-name: fade-out; animation-duration: 2s; } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; height: 0;} }
<div class="fade-out">Style Test</div>
If you add animation-fill-mode: forwards;
如果添加
animation-fill-mode: forwards;
to your .fade-out
rule it will fix your animation. 根据您的
.fade-out
规则,它将修复您的动画。
animation-fill-mode
specifies how CSS rules should be applied before and after executing the animation. animation-fill-mode
指定在执行动画之前和之后应如何应用CSS规则。 The default is none
which means that before and after the animation is executed, it will not apply any of the animation styles. 默认值为
none
,这意味着在执行动画之前和之后,它将不应用任何动画样式。 That's why you're seeing it revert to the pre-animation state. 这就是为什么您看到它恢复到动画前状态的原因。
forwards
tells the browser to retain the styles from the last keyframe. forwards
告诉浏览器保留最后一个关键帧的样式。 That's what you're looking for. 这就是您要寻找的。
See the MDN docs for more information. 有关更多信息,请参见MDN文档 。
div { background-color: red; height: 80px; } .fade-out { animation-name: fade-out; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; height: 0;} }
<div class="fade-out">Style Test</div>
Use animation-fill-mode property 使用动画填充模式属性
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.