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 屬性