steps() easing

概要

steps() 関数はアニメーションを離散的なフレームに分割し、滑らかな補間ではなく段階的な変化を実現します。スプライトシートアニメーションやタイプライター効果などに最適です。step-start と step-end は1ステップのプリセット値として利用できます。

対応ブラウザ

基本構文

.sprite {
  animation: walk 1s steps(8) infinite;
}
.typewriter {
  animation: reveal 2s steps(20, end);
}

実務での使いどころ

• スプライトアニメーション

  スプライトシートの各フレームを段階的に表示し、パラパラ漫画のようなアニメーションを作成します。

注意点

アクセシビリティ

• prefers-reduced-motion メディアクエリを使用して、段階的なアニメーションも含めて動きを抑制することを検討してください。

参考リンク

• MDN Web Docs — steps() easing