CSS steps() 函数

定义和用法

CSS 的 steps() 函数用于为动画创建分步计时函数。

此函数将动画持续时间划分为指定数量（n）的等长间隔。例如：如果 n 为 4，则会将动画分为 4 部分。它将持续时间从 0% 到 100% 划分为 4 部分；分别是 0%-25%、25%-50%、50%-75% 和 75%-100%。

实例

为动画创建不同的分步计时函数：

div.a {
  animation: mymove 5s steps(4, end);
}

div.b {
  animation: mymove 5s steps(6, jump-start);
}

div.c {
  animation: mymove 5s steps(4, jump-none);
}

div.d {
  animation: mymove 5s steps(4, jump-both);
}

亲自试一试

CSS 语法

steps(n, step-position)
值 描述
n 必需。指定步数/间隔数。
step-position

可选。指定值之间的跳跃发生的时间。使用以下关键字之一：

  • jump-start 或 start：动画开始时发生第一步
  • jump-end 或 end：动画结束时发生最后一步。end 是默认值
  • jump-none：不发生提前或延迟跳跃
  • jump-both：同时发生提前和延迟跳跃

技术细节

版本： CSS Easing Functions Level 1

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
77 79 65 14 64

相关页面

参考：CSS animation 属性

参考：CSS animation-timing-function 属性