animation-play-state

语法：

animation-play-state：running | paused [ , running | paused ]*

默认值：running

取值：

running：: 运动
paused：: 暂停

说明：

检索或设置对象动画的状态

如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationPlayState。

兼容性：

浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6.0-9.0	4.0	5.1	13.0-16.0	11.50-11.60
版本	10.0	5.0-9.0	5.1	13.0-16.0	11.50-11.60

写法：

内核类型	写法
Webkit(Chrome/Safari)	-webkit-animation-play-state
Gecko(Firefox)	-moz-animation-play-state
Presto(Opera)
Trident(IE)	-ms-animation-play-state
W3C	animation-play-state

示例：

<!DOCTYPE html>

<head>

<title>animation-play-state_CSS参考手册_web前端开发参考手册系列</title>

<style>

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);}

}

</style>

</head>

<body>

<h1>鼠标经过时太阳运动将暂停，移开继续：</h1>

<p></p>

</body>

</html>