Question 1

cubic-bezier関数とは何ですか？

Accepted Answer

cubic-bezier関数は、CSSアニメーションとトランジションでタイミング関数として使用される滑らかなカーブを定義します。カーブの形状を制御する4つのパラメータ（x1, y1, x2, y2）を受け取ります。

Question 2

animation-timing-functionプロパティは何をしますか？

Accepted Answer

animation-timing-function CSSプロパティは、アニメーションが各サイクルをどのように進行するかを指定します。アニメーションが加速・減速・一定速度で動くかを制御します。

Question 3

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

Accepted Answer

easeは速く始まり、最後に向かって遅くなります。ease-in-outはゆっくり始まり、中間で速くなり、最後に再び遅くなります。ほとんどのUIアニメーションでより自然な感じを生み出します。

Question 4

y値は0〜1の範囲外に出られますか？

Accepted Answer

はい。0〜1の間に留まる必要があるx値とは異なり、y値はその範囲を超えてオーバーシュートやバウンスエフェクト（例：ease-in-back、ease-out-backプリセット）を作ることができます。

Question 5

生成したタイミング関数をアニメーションに適用する方法は？

Accepted Answer

生成されたCSSをコピーし、スタイルシートにanimation-timing-function: cubic-bezier(x1, y1, x2, y2)またはtransition-timing-function: cubic-bezier(x1, y1, x2, y2)として適用します。

アニメーションタイミング生成器

プリセット