目录
css3动画手册
animation-fill-mode[播放后的状态]
语法
animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。
语法项目 | 说明 |
---|---|
初始值 | none |
适用于 | 所有元素 |
可否继承 | 否 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
检索或设置对象动画时间之外的状态。
如果提供多个属性值,以逗号进行分隔。
取值
none
:默认值。不设置对象动画之外的状态
forwards
:结束后保持动画结束时的状态,但当animation-direction
为0,则动画不执行,持续保持动画开始时的状态
backwards
:结束后返回动画开始时的状态
both
:结束后可遵循forwards
和backwards
两个规则。
实例代码
CSS
.demo_box{ -webkit-animation:f1 2s 0.5s 1 linear; -moz-animation:f1 2s 0.5s 1 linear; position:relative; left:10px; width:100px; height:100px; margin:10px 0; overflow:hidden; } .forwards{ -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; } .backwards{ -webkit-animation-fill-mode:backwards; -moz-animation-fill-mode:backwards; } @-webkit-keyframes f1{ 0%{left:10px;} 100%{left:500px;} } @-moz-keyframes f1{ 0%{left:10px;} 100%{left:500px;} }
html
我留在终点我只回到原点
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |