CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcubic-bezier()関数の使い方をわかりやすく解説

CSSでカスタムのイージング（加速・減速のカーブ）を定義したいときに便利なのが、cubic-bezier()関数です。この関数を使うことで、トランジションやアニメーションの速度変化を4つの制御点の値で細かく調整できます。

cubic-bezier()関数とは

cubic-bezier(x1, y1, x2, y2)の形式で指定し、それぞれの引数には0〜1の範囲（x軸）および任意の値（y軸）を取る数値を渡します。ベジェ曲線の形状によって、アニメーションが「ゆっくり始まって速く終わる」「一瞬オーバーシュートして戻る」などの表現が可能になります。

実装例

以下のコードでは、マウスホバー時にdiv要素の幅が3秒かけて変化します。transition-timing-functionプロパティにcubic-bezier(0.3, 0.3, 2.0, 0.9)を指定することで、独特な加速カーブを持つアニメーションになります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 100px;
            height: 100px;
            background: yellow;
            transition: width 3s;
            transition-timing-function: cubic-bezier(0.3, 0.3, 2.0, 0.9);
         }
         div:hover {
            width:200px;
      }
    </style>
   </head>
   <body>
      <p>下のコンテナにマウスを合わせてください：</p>
      <div></div>
   </body>
</html>

動作のポイント

上記の例では、y座標の値として「2.0」という1を超える値を使用しています。これにより、アニメーションの途中で幅が目標値（200px）を一時的に超えてから収束する、オーバーシュートのような効果が生まれます。このようにcubic-bezier()を活用すると、標準のeaseやlinearでは実現できない、より自然でリッチなモーションデザインを作れます。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不