您的位置：首页 > Web前端 > CSS

暂停和播放CSS3动画的两种实现方法

2016-04-24 19:51 561 查看

1，直接修改animationPlayState

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: #ff0000;
position: absolute;
animation:mymove 4s 1;
-moz-animation:mymove 4s 1; /* Firefox */
-webkit-animation:mymove 4s 1; /* Safari and Chrome */
-o-animation:mymove 4s 1; /* Opera */

-webkit-animation-fill-mode: forwards ;
-animation-fill-mode: forwards ;
}
@keyframes mymove {
from {top: 0}
to {top: 100px}
}
@-webkit-keyframes mymove {
from {top: 0}
to {top: 100px}
}
</style>
</head>
<body>
<div id="nice">nice</div>
<script>
var nice = document.getElementById("nice");

var prefixs = ["","o","moz","webkit"],
div = document.createElement("div"),
computeStyle,
prefixAnimationPlayState;
//获取所支持的animationPlayState，IE6,7,8不支持CSS3,就不写currentStyle的兼容代码了
computeStyle = window.getComputedStyle(document.documentElement,"");
prefixs.forEach(function(key){
var prefix =  !key ? "animationPlayState" : key + "AnimationPlayState";
if(typeof computeStyle[prefix] == "string")
prefixAnimationPlayState = prefix;
})

setTimeout(function(){
nice.style[prefixAnimationPlayState] = "paused";
},1000);

setTimeout(function(){
nice.style[prefixAnimationPlayState] = "running";
},2000);
</script>
</body>
</html>

2，修改class

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: #ff0000;
position: absolute;
animation:mymove 4s 1;
-moz-animation:mymove 4s 1; /* Firefox */
-webkit-animation:mymove 4s 1; /* Safari and Chrome */
-o-animation:mymove 4s 1; /* Opera */

-webkit-animation-fill-mode: forwards ;
-animation-fill-mode: forwards ;
}
@keyframes mymove {
from {top: 0}
to {top: 100px}
}
@-webkit-keyframes mymove {
from {top: 0}
to {top: 100px}
}

.paused{
-webkit-animation-play-state: paused!important;
-moz-animation-play-state: paused!important;;
-o-animation-play-state: paused!important;;
-animation-play-state: paused!important;;
}

.running{
-webkit-animation-play-state: running!important;;
-moz-animation-play-state: running!important;;
-o-animation-play-state: running!important;;
-animation-play-state: running!important;;
}
</style>
</head>
<body>
<div id="nice">nice</div>
<script>
var nice = document.getElementById("nice");

vardiv = document.createElement("div");//通过修改class暂停
setTimeout(function(){
nice.className = "paused";
},1000);

setTimeout(function(){
nice.className = "running";
},2000);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航