CSS3 逐帧动画使用技巧

逐帧动画:

-webkit-animation: animate-steps 1s steps(1, start) infinite;

animation: animate-steps 1s steps(1, start) infinite;

(1)step-start 与 step-end

除了 steps 函数,animation-timing-function 还有两个与逐帧动画相关的属性值 step-start 与 step-end

 

step-start 等同于 steps(1,start):动画执行时以开始端点为开始;

step-end 等同于 steps(1,end):动画执行时以结尾端点为开始。

2)动画帧的计算: