steps() easing
steps() は CSS の関数で、入力時間を同じ長さの指定した数値の間隔に分割する遷移を定義します。ステップ関数のサブクラスは、「階段関数」とも呼ばれることがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 8 | 12 | 4 | 5.1 | 18 | 5 | |
| CSS タイプ | ||||||
steps.jump `steps()` の `jump-` キーワード | 77 | 79 | 65 | 14 | 77 | 14 |
基本構文
CSS
.sprite {
animation: walk 1s steps(8) infinite;
}
.typewriter {
animation: reveal 2s steps(20, end);
}ライブデモ
実務での使いどころ
-
スプライトアニメーション
スプライトシートの各フレームを段階的に表示し、パラパラ漫画のようなアニメーションを作成します。
注意点
- ステップ数が少なすぎるとカクカクした動きになり、多すぎると滑らかなアニメーションと区別がつかなくなります。
アクセシビリティ
- prefers-reduced-motion メディアクエリを使用して、段階的なアニメーションも含めて動きを抑制することを検討してください。