CSS 动画的 steps（）

本文转自：http://web.jobbole.com/83657/

animation默认以ease方式过渡，会以在每个关键帧之间插入补间动画，所以动画效果是连贯性的。ease，linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。本文后面有案例。

steps用法

简单地说，就是原本一个状态向另一个状态的过渡是平滑的，steps可以实现分布过渡。steps用法 :

CSS

1

steps(n,[start | end])

n是一个自然数，steps函数把动画分成n等份。

• step-start 等同于 steps(1,start) ，动画分成 1 步，动画执行时以左侧端点为开始
• step-end 等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始

没懂对不对？我也没懂，上面是官方的说法。接着往下看吧

辨析steps

steps(4,start) 与 steps(1,start) 的最大区别就是每次动画”跳跃”的时候，即从 0% -> 25% 的时候，steps(1) 直接一步到位，瞬间从0%的状态跳到25%的状态，而steps(4)会逐渐走4步，即从 0% -> 25% 要跳 4 步 !

慢慢体会一下，应该就知道steps的作用了吧

案例 – 控制台效果

demo:

body{background-color:#000;}@-webkit-keyframes blink {  0%, 100% {        background-color: #000;          }  50% {        background-color: #bbb;  }}.blink{display:inline-block;width:8px;-webkit-animation:blink 1s infinite steps(1,start);}

这里就是steps(1,start) ，动画又是只有 0%(100%) 、 50% 两个状态，所以直接一步跳跃，直接走完。

你可以改成steps(4)，就更能知道steps的作用了

案例 – 人人网首页效果

先看看人人网首页的效果:

demo:

.box{  display:-webkit-box;  -webkit-box-pack:center;}.s-box{  text-align:center;}.content{  width:149px;  height:149px;  margin:10px;  background-image:url(http://gyb-demo.qiniudn.com/r.jpg);  background-repeat:no-repeat;  background-position:0 0;}.s1:hover{  background-position:0 -1800px; }.s2:hover{  -webkit-animation:movedown 500ms forwards;}.s3:hover{  -webkit-animation:movedown 500ms steps(12) forwards;}@-webkit-keyframes movedown{  0%{    background-position:0 0;  }  100%{    background-position:0 -1800px;   }}

一步一步分析：

• 首先，我们不加动画，就像s1；
• 然后，加animation但是没有steps，像s2那样。这样很奇怪是不是，就是因为没有steps，动画是连贯的，所以我们看到了跑马灯似的效果：
• 最后，当然是我们的终极效果s3，因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图，再加上合适的steps和动画时间，就看到了人人网首页的那般顺滑的动画效果！ 注意，为了保持最后停止的状态，还要加一个 forwards ，这里不是本文重点，就不细说了。

再考考你有没有搞清楚steps：为什么图片是20帧，可是设置成steps(12)呢？

因为steps是设置的每一步动画的跳跃步数，而不是整个动画的跳跃步数。举个例子：

CSS

1

2

3

4

5

6

7

8

@-webkit-keyframes ani{

   0%{...}

   50%{...}

   100%{...}

}

.xxx:hover{

   -webkit-animation:ani 2s steps(10) ;

}

 

上面的代码指的是0%~50%之间有10个跳跃，50%~100%之间有10个跳跃。而不是0%~100%之间有10个跳跃。

0 0

• CSS 动画的 steps（）
• CSS | steps 的内心探索之路
• Css的Animation动画
• css的动画
• css 动画（Animation）
• CSS（3）-动画
• Css 动画的回调
• CSS动画的性能优化
• 关于css动画的优化
• CSS动画的性能优化
• 常用的CSS动画效果
• css3 animation和background-position制作动画效果（animation steps）
• 深入理解CSS3 Animation 帧动画 steps
• 阿里云首页逐帧动画steps
• CSS+JavaScript实现简单的蜂窝动画（一）
• 简单的CSS图片动画（鼠标悬浮效果）
• 表单标签动画（CSS）
• Learn CSS Positioning in Ten Steps
• Windows下查询命令行启动参数
• 图片预加载与懒加载
• java-连接access
• 《Motion Design for iOS》（十四）
• Spring基础知识（2）
• CSS 动画的 steps（）
• Android AsyncTask的理解
• 两个乒乓球队进行比赛，各出三人。甲队为a,b,c三人，乙队为x,y,z三人。已抽签决定比赛名单。有人向队员打听比赛的名单。a说他不和x比，c说他不和x,z比，请编程序找出三队赛手的名单。
• 【Windows】【Runtime Error】Explorer.exe异常
• 第8章：structures, unions, and enumerations
• 待后续了解
• 数据分析/数据挖掘/机器学习---- 必读书目
• thinkphp 分组、页面跳转与ajax
• 深圳8千名滴滴司机被封号？ 官方：只是平台整治