<!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. kali客户端攻击

    浏览器攻击 browser_autpwn2 (BAP2) mkdir /test 为接受响应的服务器创建目录   use auxiliary/server/browser_autopwn2  set ...

  2. Oracle客户端的安装

    首先Orcale的安装应该是很简单的,安装不好只是部熟悉,在其中遇见的一些问题记录下来,如果以后忘记了还可以看看. 首先最大的问题是安装客户端的时候要安装32位的,不管你的操作系统是32位还是64位的 ...

  3. Java集合初体验

    背景:        因为对Java的集合完全不了解,所以才在网上找了找能形成初步印象的文章进行学习,大多涉及的是一些概念和基础知识. 一.数组array和集合的区别: (1)数组是大小固定的,并且同 ...

  4. Jquery 获取上传文件大小

    <input type="file" id="file1" /> <script> var size = $("#file1& ...

  5. vs2008编译wxWidgets 2.8.12

    用vs2008编译wxWidgets 2.8.12 FileZilla客户端源码3.5.3及以上版本依赖wxWidgets 2.8.12或更高版本,因此,编译FileZilla客户端首先需要编译wxW ...

  6. JavaScript——Cookie

    JavaScript中的Cookie基础 页面用来保存信息的,比如登录.记住用户名. [cookie的特性] (1)同一个网站中所有页面共享一套cookie: (2)数量.大小有限: (3)有保质期, ...

  7. Windows Shell（外壳）编程相关

    Windows Shell名字空间介绍: http://blog.csdn.net/kingcom_xu/article/details/18943 Windows Shell 外壳编程基础教程(C# ...

  8. Oracle中sys和system用户的区别

    1.数据库的启动需要以SYSDBA/SYSOPER身份登录. 2.如果在同一主机上使用IPC连接到数据库使用操作系统授权,登录任何一个用户都可以拥有as sysdba和as sysoper. 3.sy ...

  9. 解决WordPress邮件无法发送问题

    1 安装插件 Wp Mail Bank 2 开启第三方SMTP服务 以163为例:设置 - POP3/SMTP/IMAP  开启,会要求设置授权码 3 配置插件:Wp Mail Bank - sett ...

  10. 超链接解决头部fixed问题

    ///////////超链接解决头部fixed问题 $('a[href*=#]').click(function () { var top1 = $(".header").heig ...