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

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>

转载于:https://www.cnblogs.com/geilishu/p/5427936.html

暂停和播放CSS3动画的两种实现方法相关推荐

android缩放动画的两种实现方法
在android开发.我们会常常使用到缩放动画,普通情况下缩放动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: Java代码实现: // ...
unity 2D游戏开发制作帧动画的两种方法
本小主在这里给大家分享一下unity 2D游戏开发中制作帧动画的两种方法. 比较简单,一学即会. 方法一: 是用代码控制: 先创建一个2D工程.导入图片资源,并设置texture的texture ty ...
android旋转动画的两种实现方式
在android开发,我们会常常使用到旋转动画,普通情况下旋转动画有两种实现方式,一种是直接通过java代码去实现,第二种是通过配置文件实现动画.以下是两种动画的基本是用法: 纯Java代码实现: / ...
android动画变黑,Activity添加进入和退出动画的两种方式，解决黑色区域问题
Activity添加进入和退出动画的两种方式,解决黑色区域问题给Activity添加进入和退出动画的操作,大家一定不会陌生.常见的有两种方式,一种是通过style文件给Activity设置Theme ...
day030进程的两种创建方法，验证进程的空间隔离，join等待子进程
本节内容: 1.操作系统的简单介绍 2.进程的两种创建方法 3.进程之间是空间隔离的, 参考文章: 一.操作系统的简单介绍 1.操作系统简单介绍操作系统就是一个协调.管理和控制计算机硬件资源和软件资 ...
phpcms选择文件无法加载插件怎么办_win7浏览器显示无法加载插件的两种修复方法...
深度技术win7系统在使用浏览器观看视频,浏览网页的时候,显示无法加载插件,导致浏览器没办法正常使用,给操作带来一定的影响,怎么办?为什么浏览器会显示无法加载插件?针对此疑问,接下去小编给大家分享wi ...
在Windows 10上观看DVD的两种简便方法
在Windows 10上观看DVD的两种简便方法 - Win 10学院 - win10系统之家 (ghost580.com) 工具1: 5KPlayer 工具2: WinX DVD Ripper Pl ...
快速排序的两种实现方法(c语言版本)
经过调研发现,对任意无序整数数组,快速排序有两种实现方法,这里简单阐述下思路: 思路一:随意选择一个基准元,一般选择数组的起始元或末尾元,Weiss这本书上特意搞了个算法来选择基准元,--,总之就是基 ...
R语言生存分析COX回归分析实战:两种治疗方法发生肾功能损害的情况
R语言生存分析COX回归分析实战:两种治疗方法发生肾功能损害的情况目录

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

1，直接修改animationPlayState

2，修改class

暂停和播放CSS3动画的两种实现方法相关推荐

最新文章

热门文章