animation-play-state

animation-play-state属性可以指定动画是否正在运行或已暂停

前端控更新时间：2019-03-23 13:37:19

具体内容
相关视频
相关知识
最新评论

animation-play-state属性

含义：

animation--play-state属性可以指定动画是否正在运行或已暂停。

注意：在JavaScript中使用此属性在一个周期中暂停动画。

浏览器支持：

属性
浏览器	IE	Chrome	Firefox	Safari	Opera
animation-play-state	10.0	43.0/4.0 -webkit-	16.0/5.0 -moz-	9.0/4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS语法：

animation-play-state: paused|running;

属性值：

paused ：指定暂停动画

running：指定正在运行的动画

暂停动画

实例

<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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

Image 11.jpg

推荐手册

animation-play-state

实例