CSS的steps()属性

在CSS中，steps()属性用于定义一个过渡动画中的步骤，每个步骤之间的变化是离散的，而不是连续的。

语法

steps(<number-of-steps>, [ <direction> ])

• <number-of-steps>：指定过渡中的步骤数量。
• <direction>：可选参数，如果指定了，表示步骤的“方向”，可以为start或end。未指定时默认为end，表示在过渡的最后一步完成之前执行动画。

使用方法

steps()属性通常使用在animation-timing-function属性中，来定义动画过渡的时间函数。例如：

.element {
  animation: my-animation 5s steps(20, end);
  animation-timing-function: steps(20, end);
}

上述代码表示，动画名称为my-animation，总过渡时间为5秒，共有20个步骤，每个步骤之间完成动画的变化，最后一步是过渡完成前执行的动画。

示例

#box {
  width: 100px;
  height: 100px;
  background: red;
  animation: box 2s steps(5, end) infinite;
}

@keyframes box {
  0% {border-radius: 0;}
  100% {border-radius: 50%;}
}

上述代码表示一个正方形div，在2秒内完成5个变化步骤的动画效果，每步变化将边框半径逐渐增大，最终呈现为一个圆形。

注意

• steps()属性定义的动画效果是离散的，适用于一些比较简单的效果，如逐帧动画、翻书效果等，不适用于连续和平滑的效果。
• 在使用steps()属性的过渡动画中，每个步骤之间的变化是不连续的，并且不同浏览器对该属性的支持可能有所不同，需要进行兼容性处理。
• 在使用steps()属性定义动画的过渡时间函数时，需要注意<number-of-steps>参数的取值范围，取值过大可能会导致动画效果不自然。