animation-play-state
版本： CSS3
animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
示例
/* single animation */ animation-play-state: running; animation-play-state: paused; /* multiple animations */ animation-play-state: paused, running, running; /* global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset;
浏览器支持
|
|
|
|
|
IE10以上版本的浏览器都支持
animation-play-state
|
||||
语法
animation-play-state : running | paused
取值
- running ：当前动画正在运行。
- paused ：当前动画以被停止。
| 默认值 | running |
| 适用于 |
所有元素，包含伪对象
::before
and
::after
|
| 继承性 | 无 |
| 动画性 | 否 |
| 计算值 | 指定值 |
| 媒体 | 视觉< |
实例
<style type="text/css">
div{
width:100px;
height:100px;
position:relative;
background-color:hsl(120,65%,75%);
animation:demo 5s 1;
-webkit-animation:demo 5s 1;
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
@keyframes demo
{
from{left:0px;}
to{left:350px;
}
}
/*safari和chrome*/
@-webkit-keyframes demo
{
from{left:0px;}
to{left:350px;}
}
</style>
</head>
<body>
<div></div>
</body>
效果图：
