cubic-bezier()

キュービック・ベジェ（値）

意味速度曲線のカスタマイズ

cubic-bezier()とは？

cubic-bezier()関数は、アニメーションやトランジションで使用するタイミング関数の一つです。この関数を使うことで、要素の動きの加速や減速を細かく制御することができます。4つの値（P1x, P1y, P2x, P2y）を指定して、ベジェ曲線を定義します。

cubic-bezier()の具体的な使い方

cubic-bezier()関数を使用したカスタムアニメーションの例

<style>
    .cubic-bezier-animation {
        transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }
    .cubic-bezier-animation:hover {
        background-color: lightgreen;
    }
</style>

<div class='cubic-bezier-animation'>
    カスタム速度曲線
</div>

全てのプロパティに対するトランジションを0.3秒間で適用し、cubic-bezier関数で定義された速度曲線に従ってアニメーションさせます。

cubic-bezier()に関するよくある質問

Q. cubic-bezier()の引数の意味は？

A. cubic-bezier()関数は4つの数値を引数に取ります。これらはP1とP2の2つの制御点のx座標とy座標を表します（P1x, P1y, P2x, P2y）。これらの点によって、アニメーションの加速と減速のカーブが決定されます。値の範囲は通常0から1ですが、yの値はその範囲を超えることができます。

Q. ease-inとの違いは何ですか？

A. ease-inは事前定義されたタイミング関数の一つで、アニメーションがゆっくり始まり徐々に加速します。cubic-bezier()を使うと、より細かくカスタマイズされた速度曲線を作成できます。例えば、cubic-bezier(0.42, 0, 1, 1)はease-inと同等ですが、これを調整して独自の動きを作ることができます。

Q. 適切な値の選び方は？

A. 適切な値を選ぶには、試行錯誤が必要です。多くのオンラインツールがあり、視覚的に曲線を調整してcubic-bezier()の値を生成できます。一般的に、滑らかな動きには(0.25, 0.1, 0.25, 1.0)のような値を、よりダイナミックな動きには(0.68, -0.55, 0.265, 1.55)のような値を使用します。目的の動きに合わせて調整してください。

cubic-bezier()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのcubic-bezier()やstep-start、initial、red、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。