Open riskers opened 8 years ago
animation默认以ease方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。ease,linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。本文后面有案例。
animation
ease
linear
steps
简单地说,就是原本一个状态向另一个状态的过渡是平滑的,steps可以实现分布过渡。steps用法 :
steps(n,[start | end])
n是一个自然数,steps函数把动画分成n等份。
n
step-start
steps(1,start)
step-end
没懂对不对?我也没懂,上面是官方的说法。接着往下看吧
可以在demo中查看step的区别:狠狠地戳下去
steps(4,start) 与 steps(1,start) 的最大区别就是每次动画"跳跃"的时候,即从 0% -> 25% 的时候,steps(1) 直接一步到位,瞬间从0%的状态跳到25%的状态,而steps(4)会逐渐走4步,即从 0% -> 25% 要跳 4 步 !
steps(4,start)
steps(1)
steps(4)
慢慢体会一下,应该就知道steps的作用了吧
先戳 demo
这里就是steps(1,start) ,动画又是只有 0%(100%) 、 50% 两个状态,所以直接一步跳跃,直接走完。
你可以改成steps(4),就更能知道steps的作用了
先看看人人网首页的效果:
再戳demo
一步一步分析:
首先,我们不加动画,就像s1;
s1
然后,加animation但是没有steps,像s2那样。这样很奇怪是不是,就是因为没有steps,动画是连贯的,所以我们看到了跑马灯似的效果:
s2
最后,当然是我们的终极效果s3,因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图,再加上合适的steps和动画时间,就看到了人人网首页的那般顺滑的动画效果! 注意,为了保持最后停止的状态,还要加一个 forwards ,这里不是本文重点,就不细说了。
s3
forwards
再考考你有没有搞清楚steps:为什么图片是20帧,可是设置成steps(12)呢? 因为steps是设置的每一步动画的跳跃步数,而不是整个动画的跳跃步数。举个例子: @-webkit-keyframes ani{ 0%{...} 50%{...} 100%{...} } .xxx:hover{ -webkit-animation:ani 2s steps(10) ; } 上面的代码指的是0%~50%之间有10个跳跃,50%~100%之间有10个跳跃。而不是0%~100%之间有10个跳跃。
再考考你有没有搞清楚steps:为什么图片是20帧,可是设置成steps(12)呢?
steps(12)
因为steps是设置的每一步动画的跳跃步数,而不是整个动画的跳跃步数。举个例子:
@-webkit-keyframes ani{ 0%{...} 50%{...} 100%{...} } .xxx:hover{ -webkit-animation:ani 2s steps(10) ; }
上面的代码指的是0%~50%之间有10个跳跃,50%~100%之间有10个跳跃。而不是0%~100%之间有10个跳跃。
0%
50%
100%
呼呼,终于理清了steps的作用。感觉这个过程就是渐进增强的体验,一开始用户只能体验s1,后来有了css3,可以体验美妙的动画了,就像s3。但愿以后我们能够做到让每一个用户都满意。
css3
向我捐助 | 关于我 | 工作机会
请问下雪碧图每个帧的宽高必须是一致的对吧? @cocody
animation
默认以ease
方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。ease
,linear
等之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps
过渡方式。本文后面有案例。steps用法
简单地说,就是原本一个状态向另一个状态的过渡是平滑的,
steps
可以实现分布过渡。steps
用法 :n是一个自然数,
steps
函数把动画分成n
等份。step-start
等同于steps(1,start)
,动画分成 1 步,动画执行时以左侧端点为开始 ;step-end
等同于 steps(1,end) ,动画分成 1 步,动画执行时以结尾端点为开始 。没懂对不对?我也没懂,上面是官方的说法。接着往下看吧
辨析steps
可以在demo中查看step的区别:狠狠地戳下去
steps(4,start)
与steps(1,start)
的最大区别就是每次动画"跳跃"的时候,即从 0% -> 25% 的时候,steps(1)
直接一步到位,瞬间从0%的状态跳到25%的状态,而steps(4)
会逐渐走4步,即从 0% -> 25% 要跳 4 步 !慢慢体会一下,应该就知道
steps
的作用了吧案例 - 控制台效果
先戳 demo
这里就是
steps(1,start)
,动画又是只有 0%(100%) 、 50% 两个状态,所以直接一步跳跃,直接走完。案例 - 人人网首页效果
先看看人人网首页的效果:
再戳demo
一步一步分析:
首先,我们不加动画,就像
s1
;然后,加
animation
但是没有steps
,像s2
那样。这样很奇怪是不是,就是因为没有steps
,动画是连贯的,所以我们看到了跑马灯似的效果:最后,当然是我们的终极效果
s3
,因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图,再加上合适的steps
和动画时间,就看到了人人网首页的那般顺滑的动画效果! 注意,为了保持最后停止的状态,还要加一个forwards
,这里不是本文重点,就不细说了。呼呼,终于理清了
steps
的作用。感觉这个过程就是渐进增强的体验,一开始用户只能体验s1
,后来有了css3
,可以体验美妙的动画了,就像s3
。但愿以后我们能够做到让每一个用户都满意。参考