animation-fill-mode

animation-fill-mode属于用于规定当动画不播放时所要应用到的元素样式

前端控更新时间：2019-03-23 13:38:28

具体内容
相关视频
相关知识
最新评论

animation-fill-mode属性

含义：

animation-fill-mode 属性规定当动画不播放时要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属

性可重写该行为。

浏览器支持：

属性
浏览器	IE	Chrome	Firefox	Safari	Opera
animation-fill-mode	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

CSS语法：

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

属性值：

none ：动画在动画执行之前和之后不会应用任何样式到目标元素，默认值

forwards：在动画结束后，动画将应用该属性值

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both：动画遵循 forwards 和 backwards 的规则。换句话说，动画会在两个方向上扩展动画属性

initial：设置该属性为它的默认值，请参考 initial

inherit：从父元素继承该属性，请参考 inherit

设置forwards属性，即当动画结束后，元素的样式将设置为动画的最后一帧的样式

实例

<style type="text/css">
div{
	width:100px;
	height:100px;
	position: relative;
	background-color:hsl(120,65%,75%);
	animation:demo 5s infinite ;
	-webkit-animation:demo 5s;
	animation-fill-mode:forwards;
        -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
	}
@keyframes demo
{
from {left:0px;}
to {left:350px;
opacity: 0.5;}
}
 /*Safari 和 Chrome */
@-webkit-keyframes demo
{
from {left:0px;}
to {left:350px;
opacity: 0.5;}
}
</style>
</head>
<body>
	<div></div>	
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

推荐手册

animation-fill-mode

实例