animation-timing-function
规定动画的速度曲线
除了ease
,linear
、cubic-bezier
之类的过渡函数都会为其插入补间, 动画效果是连贯性的。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps
过渡方式
理解steps
steps
函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量(必须是正整数)
第二个参数可选,接受 start
和 end
两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end
。
step-start
等同于steps(1,start)
,动画分成1步,动画执行时为开始左侧端点的部分为开始;
step-end
等同于steps(1,end)
:动画分成一步,动画执行时以结尾端点为开始,默认值为end
。
steps第一个参数的错误的理解:
steps(5,start)
steps()
第一个参数 number
为指定的间隔数,即把动画分为 n 步阶段性展示,估计大多数人理解就是keyframes
写的变化次数
我之前也一直认为steps(5,start)
中的5 就是指的keyframes
中的0% 25% 50% 75% 100%
分成5个间隔等分
关键要理解第一个参数的针对点,首先引入一个核心点:
timing-function
作用于每两个关键帧之间,而不是整个动画
那么第一个参数很好理解了,steps
的设置都是针对两个关键帧之间的,而非是整个keyframes
,所以第一个参数对 - 次数对应了每次steps
的变化
换句话说也是 0-25 之间变化5次, 25-50之间 变化5次 ,50-75 之间变化5次,以此类推
第二个参数可选,接受 start
和 end
两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end
通过案例看下 step-start,step-end 的区别
@-webkit-keyframes circle {
0% {background: red}
50%{background: yellow}
100% {background: blue}
}
step-start :
黄色与蓝色相互切换
step-end :
红色与黄色相互切换
2个参数都会选择性的跳过前后部分,start
跳过0%,end
跳过100%
step-start
在变化过程中,都是以下一帧的显示效果来填充间隔动画,所以0% 到 50% 直接就显示了黄色yellow
step-end
与上面相反,都是以上一帧的显示效果来填充间隔动画,所以0% 到 50% 直接就显示了红色red
总结:
steps
函数,它可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果。
第二个参数设置后其实和step-start
,step-end
同义,在分成的小间隔动画中判断显示效果。可以看出:steps(1, start)
等于step-start
,steps(1,end)
等于step-end