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>

暂停和播放CSS3动画的两种实现方法的更多相关文章

  1. android缩放动画的两种实现方法

    在android开发.我们会常常使用到缩放动画,普通情况下缩放动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: Java代码实现: // ...

  2. css3动画的两种方式transition和@keyframs

  3. Android系统移植与调试之------->如何修改开机动画的两种方式剖析

    首先,我们先来分析一下源码: frameworks/base/cmds/bootanimation/BootAnimation.cpp 首先看一下定义的常量: BootAnimation::ready ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. cocos2dx 帧动画的两种创建方式

    看了好几天cocos2dx的帧动画,现在才有点眉目,为了高效期间我们一般会用到 精灵帧缓存(CCSpriteFrameCache) 和动画缓存(CCAnimationCache) .大体的操作步骤: ...

  6. android位移动画的两种实现方式

    在android开发,我们会常常使用到位移动画,普通情况下位移动画有两种实现方式.一种是直接通过java代码去实现,第二种是通过配置文件实现动画,以下是两种动画的基本是用法: 纯Java代码实现: / ...

  7. android旋转动画的两种实现方式

    在android开发,我们会常常使用到旋转动画,普通情况下旋转动画有两种实现方式,一种是直接通过java代码去实现,第二种是通过配置文件实现动画.以下是两种动画的基本是用法: 纯Java代码实现: / ...

  8. 关于Unity的两种调试方法

    Unity的两种调试方法 1.Debug.Log()输出语句调试,平时经常用这个 2.把MonoDevelop和Unity进行连接后断点调试 先把编辑器选择为MonoDevelop,Edit----& ...

  9. angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

随机推荐

  1. 开涛spring3(4.4) - 资源 之 4.4 Resource通配符路径

    4.4.1  使用路径通配符加载Resource 前面介绍的资源路径都是非常简单的一个路径匹配一个资源,Spring还提供了一种更强大的Ant模式通配符匹配,从能一个路径匹配一批资源. Ant路径通配 ...

  2. java加密解密研究6、MD算法家族

    一.简述 MD5算法是典型的消息摘要算法,其前身有MD2.MD3和MD4算法,它由MD4.MD3和MD2算法改进而来.不论是哪一种MD算法,它们都需 要获得一个随机长度的信息并产生一个123位的信息摘 ...

  3. Segmentation Faul

    转自:http://www.cnblogs.com/panfeng412/archive/2011/11/06/segmentation-fault-in-linux.html

  4. 建造者模式—设计角度重温DNF中的角色

    应用场景 假设现在我们要设计DNF中的人物角色(鬼剑士.神枪手.魔法师.圣骑士.格斗家).然而,利用面对对象的思想,必须先从实体入手,每一个角色都包含各种装备.武器.配饰,这些就当做要建造的零件,然后 ...

  5. docker - win7下构建swarm nodes实现跨host的容器之间的通信

    前言 之前在Linux环境下尝试了swarm,通过将不同host以swarm nodes 的方式连接到一起(构建Overlay 子网),从而实现跨host的container通信. 今天我们就来说说如 ...

  6. 深入探索C++对象模型(三)

    Data 语义学 一个class的data members,一般而言,可以表现这个class在程序执行时的某种状态.Nonstatic data members放置的是"个别的class o ...

  7. 让Chrome看不了WWDC直播的HLS技术详解

    Requirements: Live streaming uses Apple's HTTP Live Streaming (HLS) technology. HLS requires an iPho ...

  8. javaCV图像处理之Frame、Mat和IplImage三者相互转换(使用openCV进行Mat和IplImage转换)

    前言:本篇文章依赖四个jar包,其中javacv.jar,javacpp.jar和opencv.jar为固定jar包,opencv-系统环境.jar为选配(根据自己的系统平台,x64还是x86而定) ...

  9. MyEclipse解决SVN同步冲突问题conflict in the working copy obstructs the current operation

    服务端版本控制软件subversion,客户端是eclipse的插件subclipse.当删除一个东西的时候老是提示错误,说冲突 commit -m "" C:/Users/Adm ...

  10. vue init webpack-simple project 报错处理(connect ETIMEDOUT 192.30.253.112)

    Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT 192.30.253.113:443 Failed ...