cubic-bezierとは
アニメーションの速度の変化(緩急)を指定するものです。
4つの数値 cubic-bezier(x1, y1, x2, y2) で曲線を表し、
始めをゆっくり・終わりを速く、といった動きを細かく調整できます。
自然に見えるコツ
多くの場合、動き始めは少し速く、終わりに向けてゆっくり止まる(ease-out系)と自然に見えます。 逆に、機械的に等速(linear)だと硬い印象になります。まずはプリセットの「ease-out」から試すのがおすすめです。
行き過ぎる動き(オーバーシュート)
ハンドルを枠の外まで動かすと、一度行き過ぎて戻る「弾む」ような動きになります。 ポップな演出に向きますが、多用すると落ち着きがなくなるので、ここぞという場面に。
このツールについて
設定はすべてブラウザ内で処理され、サーバーに送信されることはありません。