在应用 CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见demo：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>spirit动画</title>

        <link rel="stylesheet" href="">

        <style>

        .bird{background: url(http://www.china-pub.com/static/alltype_zt/060710flash_1/market_1_9.jpg);width: 140px;height:85px;animation: bird 0.8s steps(4) infinite;  }

        @keyframes bird{

            from {

            background-position: 0 0;

            }

            to {

            background-position: -400% 0px;

            }

        }

        </style>

    </head>

    <body>

        <div class="bird"></div>

    </body>

</html>

其原理是：使用一张含有多帧静态画面的图片，通过切换 background-position 使其变为连续的动画。上面例子中steps(4)，表示让整个动画在4个关键帧之间切换。这个飞翔的鸟的图片中包含了4帧，所以这里设置了4；

深入理解CSS3 animation的steps的更多相关文章

  1. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  2. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  3. 深入理解CSS3 Animation 帧动画（转）

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  4. CSS3 animation的steps方式过渡

    animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果 是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不 ...

  5. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  6. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  7. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  8. CSS3 animation 与JQ animate()的区别

    CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...

  9. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

随机推荐

  1. JavaScript高级 Function类型

    ·    Function类型 (属于引用类型) 1.JS中,有的函数均是对象,这个一个非常有特点的地方.它既然是对象,那么它的构造函数是谁呢?就是Function.(例如:function Pers ...

  2. 关于fork函数中的内存复制和共享

    原来刚刚开始做linux下面的多进程编程的时候,对于下面这段代码感到很奇怪, #include<unistd.h> #include<stdio.h> #include< ...

  3. CSS设计之页面滚动条出现时防止页面跳动的方法

    一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,大淘宝的首页: 然而,这种布局有一个存在一个影 ...

  4. CentOS 6.4安装Kangle面板

    kangle web server一键安装包是一个用Linux Shell编写的可以为CentOS 6 VPS(VDS)或独立主机安装kangle web server(kangle,easypane ...

  5. MapReduce框架Partitioner分区方法

    前言:对于二次排序相信大家也是似懂非懂,我也是一样,对其中的很多方法都不理解诶,所有只有暂时放在一边,当你接触到其他的函数,你知道的越多时你对二次排序的理解也就更深入了,同时建议大家对wordcoun ...

  6. 为hbase新增节点

    为hbase增加新的节点,首先要为hadoop增加新新街点.因为我的做法是将datanode和regionserver放到一台物理机上.因此大体流程是: 1.克隆已经存在的regionserver虚拟 ...

  7. 内存详解--理解 JVM 如何使用 AIX 上的本机内存

    转自---http://www.ibm.com/developerworks/cn/java/j-nativememory-aix/

  8. 蓝牙4.0LED灯控方案

    一.LED照明机遇 相对传统光源产品,LED灯凭借其光效高.寿命长.不含汞.总拥有成本低等优势,已被普遍认为是一种革命性和替代性的技术.随着全球白炽灯禁产.禁用政策的依次落实,白炽灯将逐渐消失于市场. ...

  9. 从基础开始，从一个SQLHelper开始

    最开始考虑的问题有这三点: 1.Access和SQLServer都要能用. 2.尽量简单,清晰. 3.性能不出大问题. public class SQLHelp { #region 私有域 priva ...

  10. psql: 致命错误: 用户 "postgres" Ident 认证失败

    RedHat: 问题: psql -U postgres 时出现:psql: 致命错误:  用户 "postgres" Ident 认证失败 解决: 修改 /var/lib/pgs ...