HTML DOM样式animationPlayState属性用于指定动画是运行还是暂停。
用法:
animation-play-state:running|paused|initial|inherit;
属性值:
- running:此值用于运行/播放动画。
- paused:此值用于暂停动画。
- initial:此值将animation-play-state属性设置为父元素的值。
- inherit:此值用于将.animation-play-state属性设置为default(运行)。
例:animation-play-state:正在运行
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style animationPlayState Property
</title>
<style>
div {
height:100px;
width:150px;
font-size:100px;
-webkit-animation:movement 3s infinite;
-webkit-animation-play-state:paused;
animation:movement 3s infinite;
color:darkgreen;
position:relative;
<!-- property value "running" -->
animation-play-state:running;
}
@-webkit-keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
@keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
</style>
</head>
<body>
<br>
<div id="block">Geeks For Geeks</div>
</body>
</html>
输出:
例:animation-play-state:已暂停
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style animationPlayState Property
</title>
<style>
div {
height:100px;
width:150px;
font-size:100px;
-webkit-animation:movement 3s infinite;
-webkit-animation-play-state:paused;
animation:movement 3s infinite;
color:darkgreen;
position:relative;
<!-- property value "paused" -->
animation-play-state:paused;
}
@-webkit-keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
@keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
</style>
</head>
<body>
<button onclick="Play()">
Click to make the object move
</button>
<script>
function Play() {
document.getElementById("block"
).style.WebkitAnimationPlayState = "running";
document.getElementById("block"
).style.animationPlayState = "running";
}
</script>
<br>
<div id="block">Geeks For Geeks</div>
</body>
</html>
输出:
例:animation-play-state:继承
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style animationPlayState Property
</title>
<style>
div {
height:50px;
width:150px;
font-size:100px;
-webkit-animation:movement 3s infinite;
-webkit-animation-play-state:paused;
animation:movement 3s infinite;
color:darkgreen;
position:relative;
animation-play-state:running;
}
h4 {
width:150px;
-webkit-animation:movement 3s infinite;
-webkit-animation-play-state:paused;
animation:movement 3s infinite;
color:darkgreen;
position:relative;
<!-- property value "inherit" -->
animation-play-state:inherit;
}
@-webkit-keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
@keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
</style>
</head>
<body>
<br>
<div id="block">
Gfg
<h4> I'm inherited</h4>
</div>
</body>
</html>
输出:
例:animation-play-state:初始
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style animationPlayState Property
</title>
<style>
div {
height:100px;
width:150px;
font-size:100px;
-webkit-animation:movement 3s infinite;
-webkit-animation-play-state:paused;
animation:movement 3s infinite;
color:darkgreen;
position:relative;
<!-- property value "initial" -->
animation-play-state:initial;
}
@-webkit-keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
@keyframes movement {
from {
left:50px;
}
to {
left:400px;
}
}
</style>
</head>
<body>
<br>
<div id="block">Geeks For Geeks</div>
</body>
</html>
输出:
支持的浏览器:下面列出了animation-play-state属性支持的浏览器:
- Chrome:43.0(4.0 Webkit)
- 的Firefox:16.0
- Safari:4.0 Webkit
- 边:10.0
- Opera:30.0(15.0 Webkit)
相关用法
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- HTML Style textAlign用法及代码示例
- HTML Style borderRight用法及代码示例
- HTML Style borderLeft用法及代码示例
- HTML Style wordSpacing用法及代码示例
- HTML Style textDecorationLine用法及代码示例
- HTML Style height用法及代码示例
- HTML Style whiteSpace用法及代码示例
- HTML Style opacity用法及代码示例
- HTML Style columnRuleStyle用法及代码示例
- HTML Style display用法及代码示例
- HTML Style transformStyle用法及代码示例
- HTML Style visibility用法及代码示例
- HTML Style cssFloat用法及代码示例
注:本文由纯净天空筛选整理自roshalmoraes大神的英文原创作品 HTML | DOM Style animationPlayState Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。