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. C#总结（三）DataGridView增加全选列

    最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...

  2. Dockerfile 最佳实践

    之前 一篇文章介绍 docker 的镜像基本原理和概念 ,主要介绍在编写 docker 镜像的时候一些需要注意的事项和推荐的做法. 虽然 Dockerfile 简化了镜像构建的过程,并且把这个过程可以 ...

  3. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  4. Javascript创建类和对象

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...

  5. Java web中常见编码乱码问题（一）

    最近在看Java web中中文编码问题,特此记录下. 本文将会介绍常见编码方式和Java web中遇到中文乱码问题的常见解决方法: 一.常见编码方式: 1.ASCII 码 众所周知,这是最简单的编码. ...

  6. 关于log4.net 错误，求解

    1.上结果 能生成文件 ,但是文件中无内容 2.配置文件 <configSections> <section name="log4net" type=" ...

  7. javaCV开发详解之技术杂烩：javaCV能帮我们做什么？能实现什么功能？ffmpeg和openCV能实现功能，javaCV如何做到更快、更简单的实现相应的功能？等等一堆实用话题

    前言: 该篇文章旨在帮助刚接触javaCV的盆友系统的认识音视频.javaCV.图像处理相关的体系知识和一些实用的知识. 序: javaCV早期因为内置了openCV库,所以常用来做图像识别应用,现在 ...

  8. Django Nginx反代 获取真实ip

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Andale Mono"; color: #28fe14; backgr ...

  9. Eclipse中SVN设置文件为ignore后重新添加至版本控制

    先前把需要版本控制的文件夹ignore了,用了很长时间找解决方法,结果发现竟如此简单,对eclipse的功能不熟悉啊. 方法如下: 在Window->Show View -> Naviga ...

  10. 记一次调试串口设备Bug的经历

    最近花了差不多1天的时间在折腾一个Bug,该Bug的表象如下: 这个Bug还特别独特,在开发电脑中无提示,在终端用户那里每次使用软件的时候都报这个.仔细思考了一下最近在源码中新添加的功能,没发现有啥特 ...