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

CSSでキュービックベジェ曲線を定義する方法

キュービックベジェ曲線とは

CSSで3次ベジェ曲線（キュービックベジェ曲線）を定義するには、cubic-bezier()関数を使用します。この関数は、アニメーションやトランジションの進行速度（イージング）を細かく制御するために、transition-timing-functionプロパティなどと組み合わせて利用されます。

cubic-bezier()関数は4つの数値引数（x1, y1, x2, y2）を受け取ります。これらはベジェ曲線における2つのコントロールポイントの座標を表し、x軸は時間の経過、y軸は変化の度合いに対応します。値を調整することで、加速・減速のタイミングを自由にデザインできます。

サンプルコード

以下のコードを実行して、cubic-bezier()関数の実際の動作を確認してみましょう。

<!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>

コードの解説

この例では、div要素にマウスカーソルを合わせると、幅が100pxから200pxへと3秒かけて滑らかに変化します。cubic-bezier(0.3, 0.3, 2.0, 0.9)を指定することで、標準的なeaseやlinearとは異なる、独自の加速・減速パターンを持つアニメーションが実現できます。

y1やy2に1.0を超える値（例では2.0）を指定すると、アニメーションが一時的に目標値をオーバーシュートするような弾むような動きを表現できるのも、キュービックベジェ曲線ならではの特徴です。

  1. RGBAを使ったCSSの透明度設定方法をわかりやすく解説

    CSSで要素の透明度を表現する場合、rgba() 関数を使うのが一般的です。RGBにアルファチャンネル（alpha）を加えたこのカラーモデルでは、第4パラメータで色の不透明度（opacity）を細かく指定できます。 RGBAカラーの基本 rgba() は次の4つの値で構成されます。 R（赤）・G（緑）・B（青）：それぞれ0〜255、または0〜100%の数値で指定します。 A（アルファ／透明度）：0.0（完全な透明）〜1.0（完全な不透明）までの小数で指定します。例えば「0.5」なら半透明になります。 通常の rgb() では透明度を扱えませんが、rgba() を使えば背景色だけを半透明にで

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ