<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>

    .runner {

         -webkit-animation-timing-function: steps(9,end);

         -webkit-animation-duration: .6s;

         -webkit-animation-name: m6runner;

         -webkit-animation-delay: 0s;

         -webkit-animation-iteration-count: infinite;

         -webkit-animation-direction: alternate;

         animation-timing-function: steps(9,end);

         animation-duration: .6s;

         animation-name: m6runner;

         animation-delay: 0s;

         animation-iteration-count: infinite;

         animation-direction: alternate;

     }

    @-webkit-keyframes m6runner {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: -540px 0;

        }

    }

    @keyframes m6runner {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: -540px 0;

        }

    }

    .people{ width:60px; height:67px; background:url(images/step9.png) no-repeat; background-size:540px 67px;}

    </style>

</head>

<body>

    <div class="walk">

        <div class="people runner"></div>

    </div>

</body>

</html>

微云:step9.png

css3动画 9步的更多相关文章

  1. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  2. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  3. 解决浏览器background-image属性不支持css3动画

    问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...

  4. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  5. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  6. 浅谈CSS3动画的凌波微步--steps()

    背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

  7. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  8. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  9. CSS3动画那么强，requestAnimationFrame还有毛线用？

    一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...

随机推荐

  1. Mediawiki随笔

    http://www.ibm.com/developerworks/cn/opensource/os-mediawiki/  定制wiki http://www.zzbaike.com/wiki/Me ...

  2. jsp/servlet中的编码问题

    首先声明以下只是我个人的看法,有部分观点与网上人云亦云的观点不一样,不过凡事必恭亲,我还是相信自己测试的结果 推荐一个很好地URL编码详解http://www.ruanyifeng.com/blog/ ...

  3. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 转载

    最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没 ...

  4. 史上最详细SharePoint 2013安装步骤图解新手教程

    来源:// http://www.itexamprep.com/cn/microsoft/soft/sharepoint2013/2013/0408/2866.html 文章就是SharePoint2 ...

  5. 常见dos命令

    打开控制面板:win+r  control 服务: win+r  services.msc

  6. linux 目录及文件的命名规则、ls操作

    linux 命名: 1 不超过255个字符 2 严格区分大小写 3 除/外,其他的字符都是合法的 注意:1)避免文件名首字符使用+ - .(避免和隐藏文件混淆) 2)避免文件名使用空格,制表符以及@# ...

  7. Webstrom 常用操作记录

    WebStorm 编译 es6 与 scss 的教程: http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-tran ...

  8. Struts2 stracture

  9. sql 将某列转换成一个字符串 for xml path用法

    declare @test table( name varchar(10)) insert into @test values('a') insert into @test values('b') i ...

  10. “System.BadImageFormatException”类型的未经处理的异常在 PurchaseDevices.Access.dll 中发生 其他信息: 未能加载文件或程序集“System.Data.SQLite, Version=1.0.66.0, Culture=neutral, PublicKeyToken=db937bc2d44ff139”或它的某一个依赖项。试图加载格式不正确

    引用sqlite的程序集时,有时会报如下异常:  "System.BadImageFormatException"类型的未经处理的异常在 PurchaseDevices.Acces ...