在应用 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. 仿AS语法来写HTML5—第1章，显示一张图片

    最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 第一篇 ...

  2. Android数据库(sqlite)加密方案

    最近因为一些项目的安全性需要将数据库加密,一开始想到的就是先将数据库通过AES加密,然后运行时再解密,另一种是将数据库里的内容加密. 很快这两种方案都是不理想的,第一种加密方式形同虚设,第二种,如果加 ...

  3. 一个学生分数表，用sql语句查询出各班级的前三名

    昨天去一家公司面试,被这道题难住了,哎,又失去一次好的机会. 回来 之后就再想这个问题 表结构及数据如下:

  4. rpm软件包

    安装软件:rpm -i software.rpm卸载软件:rpm -e software升级形式安装:rpm -U software-new.rpmrpm支持通过http.ftp协议安装软件:rpm ...

  5. Oracle一些常用的查询命令总结（持续更新）

    更新于:2015年1月28日 17:08:13 -------------------------表空间 --------------------------------------- ----- 查 ...

  6. POJ C程序设计进阶 编程题＃3 : 排队游戏

    编程题#3:排队游戏 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 在幼儿 ...

  7. 标签栏控制器（UITabBarController）

    一.标签栏控制器基础 1.绪论 a.一个标签栏是一个独立的界面对象,它经常与一个视图控制器(UITabBarController是UIViewController的子类)一起使用. b.一个标签栏项目 ...

  8. 学习web前端开发感想

    1.学习一个技术,不是一看见源代码就是copy,而是仔细阅读后,找到自己想要的,并且自己写出来,自己理解了,下次遇到同样的问题,自己才能解决. 2.在电脑上学习的过程中,我总是先建立一个文本文档,这样 ...

  9. 两个和尚抬水有水喝，三个和尚抬水没水喝------IT项目管理之组织架构

    说到项目经理岗位,一般的想法是,一个项目只能有一个项目经理,否则责任不明,互相推诿.偏偏IT项目需要有两个甚至三个项目经理.原因何在呢? 典型的IT项目(不包含纯技术或工具类项目)是把用户的需求转化成 ...

  10. CentOS下安装LNMP（LINUX+NGINX+MYSQL+PHP）环境

    一.安装Nginx最新版 首先查看是否有安装源包 yum list nginx  (或yum info nginx) 如果没有则 vi /etc/yum.repos.d/nginx.repo #添加如 ...