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. 致DBA：为什么你经常犯错，是因为你做的功课不够

    专职做DBA已经6年多的事件了,看同行.同事犯了太多的错误,自己也犯了非常多的错误.一路走来,感触非常深.然而绝大多数的错误其实都是很低级的错误.有的是因为不了解某个引擎的特性导致:有的是因为对线上环 ...

  2. python 计算两个日期相差多少个月

    近期,由于业务需要计算两个日期之前相差多少个月.我在网上找了很久,结果发现万能的python,居然没有一个模块计算两个日期的月数,像Java.C#之类的高级语言,都会有(date1-date2).mo ...

  3. SpringMVC实现账号只能在一处登陆

    一.问题引导 在Web开发中,实现一个账号只能在一处登陆有两种形式:1.当某个账号在某处登陆后,如果再在其他处登陆,将前一个账号挤掉:2.当某个账号登陆后,此账号在其他设备登陆提示已经登陆,无法登陆. ...

  4. HDFS运行原理

    HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Googl ...

  5. day5_ 导入模块和包

    ######################模块导入模块做的事1.产生新的名称空间2.以新建的名称空间为全局名称空间,执行文件的代码3.拿到一个模块名spam,指向spam.py产生的名称空间 imp ...

  6. VR全景，零售业冬天里的一把火——全景智慧城市

    对今天的中国来说,寻找经济转型的突破口,寻找经济权力的新霸主,零售业应该当仁不让. 零售业正在经历一场脱胎换骨的改造.一方面零售额达到前所未有的水平,另一方面,传统零售商也面临诸多挑战,其中之一,便是 ...

  7. php处理表单中的复选框问题以及js实现全选

    做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...

  8. RabbitMQ安装配置和基于EasyNetQ驱动的基础使用

    一.RabbitMQ基本概念和原理 1.AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计. 2.Ra ...

  9. Java IO流之对象流

    对象流 1.1对象流简介 1.2对象流分类 输入流字节流处理流:ObjectInputStream,将序列化以后的字节存储到本地文件 输出流字节流处理流:ObjectOutputStream 1.3序 ...

  10. (转)C++——std::string类的引用计数

    1.概念 Scott Meyers在<More Effective C++>中举了个例子,不知你是否还记得?在你还在上学的时候,你的父母要你不要看电视,而去复习功课,于是你把自己关在房间里 ...