<!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. GOF设计模式之1：单例设计模式

    1.单例设计模式核心作用: 保证一个类只有一个实例,并且提供了访问该实例的全局访问点 2.常见应用场景: window的任务管理器 项目中读取配置文件一般也是一个单例模式 数据库连接池的设计也是采用单 ...

  2. ArcGis学习教程免费版在线观看

    ArcGis学习教程免费版在线观看 作者:池建    文章来源:清华大学出版社    点击数:150220    更新时间:2013-8-8 摘要:Arcgis学习视频教程根据书籍章节逐步讲解较为详细 ...

  3. (二)u-boot2013.01.01 for TQ210：《Makefile分析》

           当时写的时候看的是2012-10版本的,但是略对比了一遍和2013.01.01没什么改动,所以这不影响对2013.01.01版本的makefile的理解.本文比较侧重于语法句意的分析,框 ...

  4. BOM/ROUTING/PO/WIP等模块常用查询

    常用查询scripts /*bom*/ select p_item.segment1,c_item.segment1,bic.COMPONENT_QUANTITY,bic.COMPONENT_YIEL ...

  5. a different object with the same identifier value was already associated withthe session异常解决方案

    异常信息: org.hibernate.NonUniqueObjectException: a different object with the same identifier value was ...

  6. C++之linux下文件结构实现

    /********** huangsy13@gmail.com FileStruct.h **********/ #ifndef FILESTRUE #define FILESTRUE   #incl ...

  7. Table of Contents - JavaSE

    Java Bean Lombok IO Commons-IO - IOUtils Regular Expression 正则表达式常用操作 Concurrency java.util.concurre ...

  8. php学习笔记5--php中的可变变量，可变函数及匿名函数

    可变变量指的是:将一个变量的值再次当做一个变量名从而得到另外一个变量的值.如:$name = 'dqrcsc';$myname = 'name'; //$myname的值碰巧是另一个变量的变量名ech ...

  9. Activity之间传递数据或数据包Bundle，传递对象，对象序列化，对象实现Parcelable接口

    package com.gaojinhua.android.activitymsg; import android.content.Intent; import android.os.Bundle; ...

  10. GitHub之上传文件

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.对于一般人来说公共仓库就已经足够了,而且我们也没多少代码来管理,O(∩_∩)O ...