animation-play-state [对象动画的状态]
语法
animation-play-state: running | paused 检索或设置对象动画的状态。
语法项目 | 说明 |
---|---|
初始值 | running |
适用于 | 所有元素 |
可否继承 | 否 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
animation-play-state检索或设置对象动画的状态,如果提供多个属性值,以逗号进行分隔。
取值
running:默认值。运动
paused:暂停
实例代码
鼠标移过来我就停,移走就运动,好听话哦!
<div class="demo_box play-state">鼠标移过来我就停,移走就运动,好听话哦!</div>
.play-state{
-webkit-animation:f1 2s 0.5s 2 linear forwards alternate;
-moz-animation:f1 2s 0.5s 2 linear forwards alternate;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.play-state:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |
0 条评论