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>

效果图：