<!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. Post Robot

    Problem Description DT is a big fan of digital products. He writes posts about technological product ...

  2. A+B Coming

    Problem Description Many classmates said to me that A+B is must needs.If you can’t AC this problem, ...

  3. 【Python千问 2】Python核心编程（第二版）-- 欢迎来到Python世界

    1.1 什么是Python 继承了传统编译语言的强大性和通用性,同时也借鉴了简单脚本和解释语言的易用性. 1.2 起源 来源于某个项目,那些程序员利用手边现有的工具辛苦工作着,他们设想并开发了更好的解 ...

  4. Oracle基础 （十四）其他函数

    转换函数: TO_DATE:转换为日期 --将字符串转换为日期 SELECT TO_DATE('2014-12-31', 'yyyy-mm-dd') FROM DUAL; SELECT TO_DATE ...

  5. JavaScript实现XML与JSON互转代码（转载）

    下面来分享一个关于JavaScript实现XML与JSON互转例子,这里面介绍了国外的三款xml转json的例子,希望这些例子能给你带来帮助. 最近在开发在线XML编辑器,打算使用JSON做为中间格式 ...

  6. 剑指Offer47 不用加减乘除做加法

    /************************************************************************* > File Name: 47_AddTwo ...

  7. hdu 4144 状态压缩dp

    #include<map> #include<set> #include<cmath> #include<queue> #include<cstd ...

  8. VB.NET 小程序 2

    Public Class Form1 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click ...

  9. js 实现angylar.js view层和model层双绑定（改变view刷新 model，改变model自动刷新view）

    近段时间研究了下angular.js 觉得它内部实现的view和model层之间存在很微妙的关系,如下图 如上图说的,view的改变会update 数据层model, 数据层会update视图层vie ...

  10. Table of Contents - Jersey

    Jersey 1.19.1 Getting Started Get started with Jersey using the embedded Grizzly server Get started ...