逐帧动画steps函数用法

发布时间 2023-08-22 14:44:37作者: 看风景就
animation-timing-function: steps(number, [end | start])

steps(number, [end | start]) 是将动画分为number段,共有number + 1帧画面。

start就是抛弃第一帧画面执行动画,end就是抛弃最后一帧画面执行动画。

steps的number参数并不是将整个动画过程切割成number段,而是对于某个css样式来说,每一段关键帧的变化切割成number段。

即使将几个关键帧的css变化设置的具有规律性,但是steps仍然会将每段关键帧的变化切割成number段,即只要在这个关键帧里设置了某个css,那么对于这个css来说,这个关键帧就会被视为steps动画的端点。

step-start = steps(1, start)

step-end = steps(1, end)或者steps(1)

steps第二个参数

从 Chrome 77+开始,steps支持了几个以jumb-开头的关键词,分别是

jump-start,等同于之前的start,表示跳过第一帧
jump-end,等同于之前的end,表示跳过最后一帧
jump-both,表示跳过第一帧和最后一帧
jump-none,表示都不跳过 steps(3, jump-none),表示执行3帧,而不是4帧