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. Java泛型的应用——T extends Comparable<? super T>

    在观察Java源码的时候,发现了这么一个写法T extends Comparable<? super T>.不禁纳闷为什么要这么写呢?有什么好处吗,extends和super在这里的作用着 ...

  2. 关于关系型数据库（MySQL）的一些概念

    主键:关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录, 该属性组就可以成为一个主键,主键不允许为空,主键只能有同一个 外键:如果一个表的某个属性是另一个表的主 ...

  3. 9、JcomboBox下拉框事件监听

    9.JcomboBox下拉框事件监听 JComboBox()的事件监听类ItemListener.其范例代码如下: import java.awt.*; import java.awt.event.* ...

  4. prop()、attr()和data()

    设置元素属性,用attr()还是prop()? 对于取值为true /false的属性,如 checked/selected/readonly或者disabled,使用prop(),其他属性使用 at ...

  5. SVN分支/合并原理及最佳实践

    转自:http://blog.csdn.net/e3002/article/details/21469437 使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到 ...

  6. iOS下KVO使用过程中的陷阱 （转发）

    iOS下KVO使用过程中的陷阱   KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.网上广为流传普及的一个例子是利用KV ...

  7. 快速傅里叶变换（FFT）算法【详解】

    快速傅里叶变换(Fast Fourier Transform)是信号处理与数据分析领域里最重要的算法之一.我打开一本老旧的算法书,欣赏了JW Cooley 和 John Tukey 在1965年的文章 ...

  8. Sql的连接表补充

        连接条件可在FROM或WHERE子句中指定,建议在FROM子句中指定连接条件.WHERE和HAVING子句也可以包含搜索条件,以进一步筛选连接条件所选的行.             连接可分为 ...

  9. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  10. laytpl : 一款非常轻量的JavaScript模板引擎

    //假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...