在应用 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. Android：控件布局（表格布局）TableLayout

    TableLayout继承LinearLayout 实例:用表格布局实现计算机布局>>>>>>>>>>>> 有多少个TableR ...

  2. WEB跨域的实现

    同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击(可以参考我的这篇文章). SOP要求 ...

  3. iOS键盘类型

    一.键盘风格 UIKit框架支持8种风格键盘. typedef enum { UIKeyboardTypeDefault,                // 默认键盘:支持所有字符 UIKeyboa ...

  4. 开源自己的一个小android项目(美女撕衣服游戏)

    这是自己的一个开源自己的一个小android项目(美女撕衣服游戏),也是前6个月开发的,有部分的资源来自网络上的,现在开源出来给大家吧,由于源码比较大,不上传了,我已经上传到源码天堂那个网站那里了,大 ...

  5. [系统]制作老毛桃U盘WinPE

    准备工作,1G以上的U盘一个, Winpe 工具一个,个人推荐老毛桃winpe Ghost镜像文件(这个不用说了吧,能想到U盘装系统肯定都知道的) 可以开始了:插入U盘(最好把U盘里的东西清空,自己保 ...

  6. 搭建高性能计算环境（十）、应用软件的安装之Wien2k

    1,首先安装fftw .tar.gz cd fftw- ./configure --prefix=/opt/fftw- --enable-shared --enable-float --enable- ...

  7. RECT 数据结构

    数据结构RECT定义了一个矩形的左上角和右下角的坐标 ? 1 2 3 4 5 6 7 8 typedef struct _RECT{         LONG left;         LONG t ...

  8. jQuery控制TR的显示隐藏

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td ...

  9. 控制不能离开Finally子句主体

    1.在try{}catch{}finally{}的结构中不可以将返回语句放置在finally的主体当中2.如果在catch{}中有向上一级从新抛出异常操作,在finally{}之后的语句将不会执行 3 ...

  10. silverlight获取web的url参数

    1.网址(如:http://localhost:8081/index.aspx?name=123) 2.获取name=123的信息 3.IDictionary<string,string> ...