在应用 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. rpm软件包

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

  2. BochsDebug

    Bochs User Manual   Chapter 8. Tips and Techniques   8.12. Using Bochs internal debugger Note, if yo ...

  3. Spring Richclient — 企业级富客户端开发框架介绍，第 1 部分

    Spring Richclient — 企业级富客户端开发框架介绍,第 1 部分 http://www.ibm.com/developerworks/cn/java/j-lo-spring-richc ...

  4. POJ C程序设计进阶 编程题＃4：Tomorrow never knows？

    来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 甲壳虫的<A day ...

  5. C# 和 Unix 时间戳转换

    unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒. /// 时间戳转为C#格式时间 private DateTime GetTime(string timeSt ...

  6. 配置Nginx服务

    一,安装之前准备1.nginx依赖: gcc openssl-devel pcre-devel zlib-devel    安装依赖:yum install gcc openssl-devel pcr ...

  7. PHP伪造referer突破防盗链

    php伪造referer实例代码,主要用于一些突破防盗链. 可以从这个例子中发展出很多的应用.比如隐藏真实的URL地址……嘿嘿,具体的就自己分析去吧 这里新建一个文件file.php.后面的参数就是需 ...

  8. 复习后台代码（与前面clentHttp连接网络结合）

    package com.zzw.LoginServelt; import java.io.IOException; import java.io.PrintWriter; import javax.s ...

  9. [terry笔记]更改oracle用户名

    更改oracle的用户名 之前有个需求,整理一个schema的表.索引等规划到一个表空间里,利用expdp/impdp然后remap就完成了,但是整理好的用户名remap变更了,应用又不想修改其连接信 ...

  10. apache 403错

    <Directory />Options FollowSymLinksAllowOverride NoneOrder deny,allowAllow from all</Direct ...