【CSS Modules】cubic-bezier()関数の使い方
cubic-bezier()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
cubic-bezier()関数は、CSSのトランジションやアニメーションにおいて、要素の動きのタイミング関数（速度変化パターン）を定義するために使用する関数です。この関数を用いることで、アニメーションが開始から終了までの進行度合いを、柔軟かつ細かく制御することが可能になります。
具体的には、2つの制御点P1(x1, y1)とP2(x2, y2)の座標を引数として指定します。キュビックベジェ曲線の始点(0,0)と終点(1,1)は固定され、x軸は時間の進行度合い、y軸はアニメーションの進行度合いを示します。
引数x1, x2は0から1の範囲で、y1, y2は範囲外も指定可能です。これらの制御点の位置を調整することで、アニメーションがゆっくり開始・終了したり、途中で加速・減速したりといった、滑らかで多様な速度変化を自由に表現できます。
これにより、easeやlinearといった標準的なキーワードでは実現できない、独自のカスタムアニメーションタイミングを定義し、ウェブコンテンツのUI表現において重要な役割を果たします。
公式リファレンス: cubic-bezier()
構文(syntax)
1selector { 2 transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 0.6); 3}
引数(parameters)
x1, y1, x2, y2
- x1: number: 最初の制御点のX座標
- y1: number: 最初の制御点のY座標
- x2: number: 2番目の制御点のX座標
- y2: number: 2番目の制御点のY座標
戻り値(return)
<timing-function>
cubic-bezier() 関数は、アニメーションの進行速度を制御するための時間関数を定義します。これは、開始点 (0, 0) から終了点 (1, 1) までの3次ベジェ曲線上の2つの制御点のX座標とY座標を指定することで、アニメーションの開始から終了までの速度の変化を滑らかに定義する <timing-function> 値を返します。