見出し画像

【CSS】cubic-bezierって、いったい、何なの？🤔

ごろじ

`cubic-bezier`関数はCSSのアニメーションやトランジションで使用されるタイミング関数の一つです。この関数は、アニメーションの中間状態を制御するために、ベジェ曲線（Bézier curve）を用いて、動きの加速や減速をカスタマイズします。`cubic-bezier`は、その名の通り3次のベジェ曲線を表し、四つの点（P0, P1, P2, P3）によって定義されます。ただし、CSSでの使用では、始点（P0）と終点（P3）は常に固定されており（それぞれアニメーションの開始と終了を表します）、ユーザーが指定するのは中間の二点（P1とP2）のみです。

使い方

`cubic-bezier`関数は、以下のようにCSSの`transition-timing-function`プロパティや`animation-timing-function`プロパティと共に使用されます：

.element {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

この例では、`cubic-bezier(0.25, 0.1, 0.25, 1.0)`がタイミング関数として指定されており、これによってアニメーションの速度カーブが定義されます。この関数の各パラメータは、始点（0, 0）と終点（1, 1）を除く、ベジェ曲線の制御点（P1とP2）のx座標とy座標を表します。

ベジェ曲線のパラメータ

  • P1のx座標: アニメーション開始後の加速度を制御します。

  • P1のy座標: アニメーション開始時の速度を制御します。

  • P2のx座標: アニメーション終了前の加速度を制御します。

  • P2のy座標: アニメーション終了時の速度を制御します。

利点

`cubic-bezier`関数を使用する最大の利点は、アニメーションの速度カーブを細かくカスタマイズできる点にあります。これにより、デザイナーや開発者は、アニメーションをより自然に見せたり、特定の感情を表現したり、ブランドの個性に合わせた動きを作成することが可能になります。また、ウェブ上で一般的に使用されるいくつかのプリセット（例えば、`ease-in`、`ease-out`、`ease-in-out`）も、実は`cubic-bezier`関数に基づいています。

ツールの使用

`cubic-bezier`関数の効果を直感的に理解するためには、ベジェ曲線を視覚化できるツールの使用が推奨されます。Web上には、CSSアニメーションのための`cubic-bezier`関数を生成し、テストできる多くの無料ツールがあります。これらのツールを使用することで、希望するアニメーションのタイミング関数を簡単に作成し、微調整することができます。

（・・・🫠 　とりあえず、値のx, yの位置について、分かったから、良し！😝）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

よろしくお願いしますッ！