<!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. css,js零散知识的整理

    在同一个dom上以冒泡和捕获的方式绑定一个事件,如果事件源是该元素,则是先绑定的哪一个就先执行哪一个,事件源是dom的子孙节点,则先执行捕获事件

  2. redhat 安装配置samba实现win共享linux主机目录

    [转]http://blog.chinaunix.net/uid-26642180-id-3135941.html redhat 安装配置samba实现win共享linux主机目录 2012-03-1 ...

  3. docker命令和后台参数

    Docker官方为了让用户快速了解Docker,提供了一个 交互式教程 ,旨在帮助用户掌握Docker命令行的使用方法. Docker 命令行 下面对Docker的命令清单进行简单的介绍,详细内容在后 ...

  4. JavaScript中时间戳和时间的相互转换

    时间转换成时间戳: var time = new Date(); var timestamp=Date.parse(time)   //毫秒数,得到秒除以1000: 时间戳转成时间: 1.转换成 20 ...

  5. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

  6. JavaScript DOM编程艺术-学习笔记（第十二章）

    第十二章 1.本章是综合前面章节的所有东西的,一个综合实例 2.流程:①项目简介:a.获取原始资料(包括文本.图片.音视频等) b.站点结构(文件目录结构) c.页面(文件)结构 ②设计(切图) ③c ...

  7. 用两个栈实现队列，剑指offer P59

    public class QueueByStack { private Stack<Integer> stack1; private Stack<Integer> stack2 ...

  8. neutron openvswitch agent实现安全组的方法

    关于openstack安全组,采用一问一答的形式记录如下 1. 是加载在计算节点的还是网络节点的? 是加载在计算节点的 2. 是使用iptable规则实现的吗? M版的neutron实现了openvs ...

  9. IOS开发小技巧，知识点

    1.IOS模拟器第一次打开需要进入“设置”中关掉"Auto-Capitalization"选项. 2.NSInteger转化 NSString类型: [NSString strin ...

  10. 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析

    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...