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 レベル1

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
77 79 65 14 64

相关页面

参考：CSS animation 属性

参考：CSS animation-timing-function 属性