购物车
登陆 / 注册
微信扫码登陆

推荐手册

animation-fill-mode

animation-fill-mode
animation-fill-mode属于用于规定当动画不播放时所要应用到的元素样式
编辑:前端控 前端控 更新时间:2019-01-26 17:32:38

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>

运行实例 »

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

效果图:

GIF.gif

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号