<!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. [JavaEE] SSH框架搭建所需要的包

    struts2commons-logging-1.0.4.jar 主要用于日志处理freemarker-2.3.8.jar 模板相关操作需要包ognl-2.6.11.jar ognl表达示所需包,xw ...

  2. Android 高级UI设计笔记11：Gallery（画廊控件）之Gallery基本使用

    1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Galler ...

  3. 【Android 界面效果14】RelativeLayout里常用的位置属性

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- android:layout_toLeftOf—— 该组件位于引用组件的左方 android:layou ...

  4. java的线程中的Runnable

                      在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口:Thread类是在java.lang包中定义的.一个类只要继承了Thr ...

  5. hdu 3938 并查集

    思路:这题的出题人是不是语文不行啊,题目意思说不清楚. 知道是求存在路径的点对数后,用并查集每次记录集合中点的数目,很容易就解决了. #include<set> #include<c ...

  6. HTML标签大全

    HTML标签解释大全 一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标 ...

  7. JQuery multiselect的相关使用

    这两天做项目需要用到多选控件,于是选择了JQuery  multiselect控件,介绍一下常用的一些相关属性. 详细地址:http://davidstutz.github.io/bootstrap- ...

  8. nodejs7-buffer

    buffer:js在后台操作的必须用到二进制,buffer类就是用于帮助我们处理这种情况   创建buffer对象: new Buffer(size):创建buff对象,有length属性 buf.f ...

  9. CSS标签知识

    一.内联标签和块标签的区别 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin和padding 5.代码换行被解析 块属性标 ...

  10. 浅谈我眼中的ASP.NET MVC

    坦白地说,学习MVC是前一段时间的事情了.但是,我当时虽然也实践过,却也不能很好的说出个所以然来.因此,也 一直没敢写点什么文字总结.最近,开始学习EF,也同时在使用MVC来结合EF实践增删改查.慢慢 ...