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. Hive的分区操作~~~~~~

    一.Hive分区(一).分区概念:为什么要创建分区:单个表数据量越来越大的时候,在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据, ...

  2. Apache solr(二)

    上一篇试着进行了solr的安装和配置,以及如何solr的检索,今天试着简单的将solr连接MySQL数据库(才尝试了单表.一对多和多对多的还有待研究) 1.MySQL的目录结构 2.新建一个democ ...

  3. 无阻塞加载和defer、async

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...

  4. XCode 出现 is missing from working copy文件一直红色情况解决方法

    解决方案:1.打开终端2.cd 到警告所提示的文件夹下3.执行命令svn rm 丢失文件的名称4.回车

  5. SmartCoder每日站立会议05

    1.站立会议内容 经过四天的努力,我们的微信小程序有了很大的进展,首页的设计定了方案,API接地图正在试着把消息展示到其中,争取把地图信息做到直观形象. 站立会议照片: 2.任务展板 3.燃尽图

  6. 深入理解C#中的String

    关于C#中的类型 在C#中类型分为值类型和引用类型,引用类型和值类型都继承自System.Object类,几乎所有的引用类型都直接从System.Object继承,而值类型具体一点则继承System. ...

  7. Windows 7 蓝屏代码大全 & 蓝屏全攻略

    关于Windows 7.Vista等系统的蓝屏,之前软媒在Win7之家和Vista之家都有很多文章讨论过,但是都是筛选的常见的一些问题,今天这个文章是个大全,希望大家看着别头痛,文章收藏下来以后待查即 ...

  8. nodejs - 守护进程 supervisor

    1. 安装   npm -g install supervisor   2. 如果使用了expres框架   需要修改启动方式 到 package.json中的   "scripts&quo ...

  9. 基于范围的for循环(STL)

    1. ]={4.99,5.99,6.99,7.99,8.99}; for (double x : prices) cout<<x<<endl; //////////////// ...

  10. JavaBean在jsp中的使用

    JavaBean在Jsp中的引用: 1.用<jsp:useBean>标记: <jsp:useBean id="name" class="classnam ...