在应用 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. sql关联excel查询

    select * from 表名 where 字段名 in (SELECT excel列名 FROM OpenDataSource( 'Microsoft.Jet.OLEDB.4.0','Data S ...

  2. Largest palindrome product

    A palindromic number reads the same both ways. The largest palindrome made from the product of two 2 ...

  3. 必须会的SQL语句（四）删除和更新

    1.删除   1)删除记录   Delete from 表名 where id ='xx'   2)删除所有数据,并回归初始化标识字段.   Truncate table 表名   3)delete与 ...

  4. Android应用源码安卓短信拦截木马项目源码

    温馨提示:本资源由源码天堂整理提供下载转载时请留下链接说明:http://code.662p.com/view/9174.html安卓短信拦截木马源码主要功能就是开机后台启动,拦截本机收到的短信并且转 ...

  5. 将ubuntu12.04中，gcc4.6/g++4.6版本降低到gcc4.4/g++4.4.

    降低Ubuntu中gcc和g++的版本 ubuntu 12.04 中带的gcc/g++都是4.6,将其降到4.4. 操作步骤如下: 一.降低gcc版本 1. $sudo apt-get install ...

  6. Ubuntu 14.04 – How to install xrdp in Ubuntu 14.04

    http://c-nergy.be/blog/?p=5305 Hello World, Ubuntu 14.04 has been released on April 17th 2014 and we ...

  7. 火狐浏览器设置placeholder的时候记得改opacity

    最近做项目的时候涉及到需要修改输入框的placeholder的字体颜色,我的CSS如下: ::-webkit-input-placeholder{ color: #c5c5c5;}::-moz-pla ...

  8. ip的正则表达式 完美版

    IP地址的长度为32位2进制,分为4段,每段8位,用十进制数字表示,每段数字范围为0~255,段与段之间用英文句点“.”隔开.例如:IP地址为10.0.0.100. 分析IP地址的每组数特点:百位,十 ...

  9. set_exception_handler 和 set_error_handler 函数

    定义和用法 set_exception_handler() 函数设置用户自定义的异常处理函数. 该函数用于创建运行时期间的用户自己的异常处理方法. 该函数会返回旧的异常处理程序,若失败,则返回 nul ...

  10. 关于Raw,Assets的使用

    Raw,Assets下文件区别: 相同点:两个目录下的文件在打包后都会原封不动的保存到apk中,不会被编译成二进制. 不同点:Raw下文件不能使用目录结构, 有些格式的会被压缩,能够通过R.raw方便 ...