<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    *{

        padding: 0;

        margin: 0;

    }

    .btn{

        width: 200px;

        text-align: center;

    }

    .test{

        width: 90px;

        height: 60px;

        background: url(img/test.png) no-repeat;

        margin: 60px;

        /*-webkit-animation: run 350ms steps(1) infinite 0s;*/

        -webkit-animation: run 350ms steps(5) infinite 0s;

    }

    /*@-webkit-keyframes run{

        0%{

            background-position: 0;

        }

        20%{

            background-position: -90px 0;

        }

        40%{

            background-position: -180px 0;

        }

        60%{

            background-position: -270px 0;

        }

        80%{

            background-position: -360px 0;

        }

        100%{

            background-position: -450px 0;

        }

    }*/

    @-webkit-keyframes run{

        100%{

            background-position: -450px 0;

        }

    }

</style>

<script>

    var speed =350;

    var flag = true;

    function fast(){

        var obj = document.getElementById('flash');

        speed-=10;

        // console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？

        obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s"

    }

    function slow(){

        var obj = document.getElementById('flash');

        speed+=10;

        // console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？

        obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s"

    }

    function play(){

        var obj = document.getElementById('flash');

        flag = !flag;

        obj.style.webkitAnimationPlayState = flag ? "running" : "paused";

    }

</script>

</head>

<body>

    <div id='flash' class="test"></div>

    <div class="btn"><button onclick="fast()">跑快点</button> <button onclick="slow()">跑慢点</button> <button onclick="play()">暂停/开始</button></div>

</body>

</html>

效果图

源码下载

CSS3 animation小动画的更多相关文章

  1. CSS3 animation（动画） 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  2. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  3. CSS3 Animation 帧动画 steps()

    @keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...

  4. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  5. 深入理解CSS3 Animation 帧动画（转）

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  6. css3的帧动画

    概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

  9. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

随机推荐

  1. c# 将文本中的数据快速导入到数据库（200万左右的数据量）

    1.sql2008中 list表,只有一个字段 Lvalue 2.文本大约256万的数据量 3.测试结果:用时36秒! string connStr = @"Data Source=.\SQ ...

  2. 【高德地图开发4】---增加覆盖物setMapTextZIndex

    高德地图 Android SDK 允许用户将添加的线.面等覆盖物设置在地图底图文字的上方或下方. 具体实现是使 用 AMap 类的 setMapTextZIndex() 方法来设置地图底图文字的z轴指 ...

  3. git 删除已经 add 的文件

    使用 git rm 命令即可,有两种选择, 一种是 git rm --cached "文件路径",不删除物理文件,仅将该文件从缓存中删除: 一种是 git rm --f " ...

  4. IIS与JIRA的反向代理配置

    JIRA配置修改 JIRA与IIS ARR的集成,除了上篇(Visual SVN IIS反向代理设置)中讲到的基本的ARR配置之外,还需要在JIRA安装目录的conf\server.xml文件中做一个 ...

  5. vb.net中的SqlHelper

    1.定义: SqlHelper是一个基于·NET Framework的数据库操作组件.组件中包含数据库操作方法.SqlHelper用于简化你重复的去写那些数据库连接(SqlConnection),Sq ...

  6. 关于automatic_Panoramic_Image_Stitching_using_Invariant_features 的阅读笔记（2）

    接上一篇: http://www.cnblogs.com/letben/p/5446074.html#3538201 捆绑调整 (好开心有同学一起来看看这些问题,要不然就是我自己的话,我应该也不会看的 ...

  7. HTML超出文本显示省略号...[text-overflow]

    需要对div或者span同时应用Css: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略 ...

  8. Linux文件系统的barrier：启用还是禁用

    大多数当前流行的Linux文件系统,包括EXT3和EXT4,都将文件系统barrier作为一个增强的安全特性.它保护数据不被写入日记.但 是,在许多情况下,我们并不清楚这些barrier是否有用.本文 ...

  9. StdRandom.java

    /************************************************************************* * Compilation: javac StdR ...

  10. c# 匿名对象增加动态属性

    在开发过程中碰到了一个需求,需要动态创建对象及其动态属性.在尝试几种方法后,最后完成了需求,记录下过程,给园友参考下 1.动态创建对象一:匿名对象 ",Birthday =DateTime. ...