标题：animation-play-state
简介
animation-play-state
语法：
animation-play-state：running | paused [ , running | paused ]*
默认值：running
取值：
running：
运动
paused：
暂停
说明：
检索或设置对象动画的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationPlayState。
写法：
内核类型写法
Webkit(Chrome/Safari)-webkit-animation-play-state
Gecko(Firefox)-moz-animation-play-state
Presto(Opera)
Trident(IE)-ms-animation-play-state
W3Canimation-play-state
示例
h1 {
font - size: 16px;
}
p {
overflow: hidden;
height: 1px;
margin: 302px 0 0;
background: #ddd;
}
div {
width: 100px;
height: 100px;
padding: 10px;
border - radius: 61px;
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
background: #F6D66E;
background: -moz - linear - gradient(top, #fff, #F6D66E);
background: -webkit - linear - gradient(top, #fff, #F6D66E);
background: -o - linear - gradient(top, #fff, #F6D66E);
background: -ms - linear - gradient(top, #fff, #F6D66E);
background: linear - gradient(top, #fff, #F6D66E); - moz - transform: translate(280px, 300px); - webkit - transform: translate(280px, 300px); - o - transform: translate(280px, 300px); - ms - transform: translate(280px, 300px);
transform: translate(280px, 300px); - moz - animation: animations 6s linear; - webkit - animation: animations 6s linear; - o - animation: animations 1.5s linear - ms - animation: animations 1.5s linear;
animation: animations 1.5s linear;
}
div: hover { - moz - animation - play - state: paused; - webkit - animation - play - state: paused; - o - animation - play - state: paused; - ms - animation - play - state: paused;
animation - play - state: paused;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, 0);
}
10 % { - webkit - transform: translate(0, 300px);
}
20 % { - webkit - transform: translate(60px, 60px);
}
30 % { - webkit - transform: translate(60px, 300px);
}
40 % { - webkit - transform: translate(120px, 120px);
}
50 % { - webkit - transform: translate(120px, 300px);
}
60 % { - webkit - transform: translate(180px, 180px);
}
70 % { - webkit - transform: translate(180px, 300px);
}
80 % { - webkit - transform: translate(240px, 240px);
}
90 % { - webkit - transform: translate(240px, 300px);
}
100 % { - webkit - transform: translate(280px, 300px);
}
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, 0);
}
10 % { - moz - transform: translate(0, 300px);
}
20 % { - moz - transform: translate(60px, 60px);
}
30 % { - moz - transform: translate(60px, 300px);
}
40 % { - moz - transform: translate(120px, 120px);
}
50 % { - moz - transform: translate(120px, 300px);
}
60 % { - moz - transform: translate(180px, 180px);
}
70 % { - moz - transform: translate(180px, 300px);
}
80 % { - moz - transform: translate(240px, 240px);
}
90 % { - moz - transform: translate(240px, 300px);
}
100 % { - moz - transform: translate(280px, 300px);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
10 % { - o - transform: translate(0, 300px);
}
20 % { - o - transform: translate(60px, 60px);
}
30 % { - o - transform: translate(60px, 300px);
}
40 % { - o - transform: translate(120px, 120px);
}
50 % { - o - transform: translate(120px, 300px);
}
60 % { - o - transform: translate(180px, 180px);
}
70 % { - o - transform: translate(180px, 300px);
}
80 % { - o - transform: translate(240px, 240px);
}
90 % { - o - transform: translate(240px, 300px);
}
100 % { - o - transform: translate(280px, 300px);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
10 % { - ms - transform: translate(0, 300px);
}
20 % { - ms - transform: translate(60px, 60px);
}
30 % { - ms - transform: translate(60px, 300px);
}
40 % { - ms - transform: translate(120px, 120px);
}
50 % { - ms - transform: translate(120px, 300px);
}
60 % { - ms - transform: translate(180px, 180px);
}
70 % { - ms - transform: translate(180px, 300px);
}
80 % { - ms - transform: translate(240px, 240px);
}
90 % { - ms - transform: translate(240px, 300px);
}
100 % { - ms - transform: translate(280px, 300px);
}
}@keyframes animations {
0 % {
transform: translate(0, 0);
}
10 % {
transform: translate(0, 300px);
}
20 % {
transform: translate(60px, 60px);
}
30 % {
transform: translate(60px, 300px);
}
40 % {
transform: translate(120px, 120px);
}
50 % {
transform: translate(120px, 300px);
}
60 % {
transform: translate(180px, 180px);
}
70 % {
transform: translate(180px, 300px);
}
80 % {
transform: translate(240px, 240px);
}
90 % {
transform: translate(240px, 300px);
}
100 % {
transform: translate(280px, 300px);[1]