CSS イージング関数

CSS イージング関数モジュールは、値の変換を制御する手段を提供するイージング関数を定義します。定義されている関数には、線形、3 次ベジェ、および段階的なイージング関数が含まれます。これらのイージング関数は、アニメーションおよびトランジションに適用できます。

要素が移動する速度を徐々に増加させると、要素が勢いを増すように見え、重量感を与えることができます。イージング関数を使用すると、変化の速度を制御することができます。 3 次ベジェイージング関数は、直感的なユーザーインターフェイス要素や、物理的な物体と同様に振る舞う説得力のある漫画のプロップを作成するために使用することができます。

あるいは、ロボットのような動きを作成したり、セグメントが常に同じ位置に現れるように回転するセグメント化された車輪の効果を作成したりするために、アニメーションを明確な段階に分けて進めたい場合もあるでしょう。このためには、段階的なイージング関数を使用することができます。

リファレンス

関数

• cubic-bezier()
• linear()
• steps()

データ型

• <easing-function>
• <linear-easing-function>
• <cubic-bezier-easing-function>
• <step-easing-function>

用語の定義

• ベジェ曲線
• 補間

ガイド

CSS 値関数: イージング関数

CSS プロパティの CSS 値を返すために、特別なデータ処理または計算を呼び出す CSS 文。

関連概念

• CSS アニメーションモジュール

  • animation-timing-function
  • animation 一括指定

• CSS トランジションモジュール

  • transition-timing-function
  • transition 一括指定

仕様書

関連情報

• CSS 値関数
• CSS の will-change プロパティ