<!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. WPF 路由事件

    最近想封装一个关于手势的控件,但是由其他的控件覆盖之后发现不能触发,据说是有一些事件在定义的时候就处理过e.Handle了. 定义的时候就处理了,就是为了控件能够正常的工作,别如Button.Mous ...

  2. cocos2dx3.0-执行cocos compile -p win32 命令出现错误 MSB8020 以及编译出来的exe 无法打开的问题

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 当博主准备把cocos工程用cocos命令行编译出来的时候,报出了MSB8020的错误,具体如下 ...

  3. RandomAccessFile的使用

    package com.lk.C; import java.io.IOException; import java.io.RandomAccessFile; public class RandomAc ...

  4. Androidstudio 点9图报错的问题

    在eclipse上.9图能够正常使用,但是到了Androidstudio上就报错无法引用,提示找不到.9图的问题.   解决方案: Androidstudio对.9图进行了更严格的定义, 1. 如果一 ...

  5. centos安装ruby on rails

      最近研究svn使用http协议,但网上大多都是apache整合svn,我不想使用apache+svn,google翻了很多页终于让我找到了,但要求先安装ruby on rails,所以就有了下面的 ...

  6. .NET中的Queue和Stack

    1．ArrayList类 ArrayList类主要用于对一个数组中的元素进行各种处理.在ArrayList中主要使用Add.Remove.RemoveAt.Insert四个方法对栈进行操作.Add方法 ...

  7. [转]在PHP语言中使用JSON

    本文转自:http://www.ruanyifeng.com/blog/2011/01/json_in_php.html 作者: 阮一峰 日期: 2011年1月14日 目前,JSON已经成为最流行的数 ...

  8. # 基于Gitolite搭建Git Server - 支持SSH&HTTP

    Git, 一个分布式的版本管理工具,我认为其革命性的点:在于改变了用户协作的方式,使得协作更简单. 下面讲述 使用一个开源软件 Gitolite搭建一个Git Sever, 并给了一个推荐的团队协助方 ...

  9. 2013 长沙网络赛J题

    思路:这题对于其他能退出所有值的情况比较好像,唯一不能确定的是XXOXXOXXOXX这个形式的序列,其中XX表示未知,O表示已知. 我们令num[1]=0,那么num[4]=sum[3]-sum[2] ...

  10. XML语言：可扩展的标记语言；

    作用:1. 解决跨语言的数据交换,C#与Javascript 语言的数据交换:. 2.XML:用于数据的存储以及传输:1.新建方法: 在解决方案资源管理器----选中网站名---右击添加新建项---- ...