Tmiracle

CSS动画使用steps函数实现逐帧动画

steps函数是什么

想必各位做网页动画过渡效果的时候,应该少不了使用animation属性,animation属性是如此的令人着迷,使得我们能将网页做出各种有逼格的动画效果。

当我们要指定动画如何完成一个周期时,animation-timing-function属性就派上了用场。

这个属性在W3C中,给定了常用的几个速度曲线值和一个函数(立方贝塞尔曲线函数),但是我翻阅MDN时,却发现还有另一个函数 --- 阶梯函数。

这个阶梯函数,就是本章要说的steps函数!

阶梯函数能做什么

这个函数到底能做什么呢,这里我们先举个例子。

假设我们有这么一张图:

而我们可以将它将它做成这样的逐帧动画:

如何使用

steps函数允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡,这个函数有两个参数:

steps(number_of_steps, direction)

  • 第一个参数number_of_steps,这个值是一个正整数,指定我们希望将动画分割的段数
  • 第二个参数direction,可选值分为startend,默认为end,当然,也可以不选。
    • start: 表示一个左持续函数,在动画开始时,动画的第一段将会马上完成。以左侧端点为起点,立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。
    • end: 表示一个右持续函数。动画执行时,在每一帧里,动画保持当前状态直到这一段的持续时间完成,才会跳到下一步的起点,后面的每一帧都按照这个模式来进行,在最后一帧的起点,等到这一帧的持续时间结束,整个动画的执行也已经结束,执行动画的元素来不及跳到这一帧的终点,直接回到了整个动画起点,开始了第二次动画。

可能这样说还不是很清晰,那我们用代码分析下:

@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(160px);
    }
}

.box:nth-child(1) {
    animation: move 4s infinite steps(4, start);
}

.box:nth-child(2) {
    animation: move 4s infinite steps(4, end);
}
<div class="box">start</div>
<div class="box">end</div>
start
end

如上所示,我们可以发现,start会以第一阶段的尾部作为起点完成整个动画,而end则是以第一阶段的首部完成整个动画。