CSSキュービックベジェジェネレータ

Cubic Bezier のドキュメンテーション

3次ベジェ曲線とは何ですか?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS 構文

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

一般的な使用例

アニメーショントランジション:プロパティを変更する要素のスムーズなアニメーションを作成します。
スクロール効果:スクロールアニメーションの速度を制御します。
インタラクティブ要素:ホバーやクリックなどのユーザー操作に要素がどのように反応するかを定義します。
モーションデザイン:UI 要素の複雑なモーションシーケンスを作成します。

一般的なイージング機能

Ease (default)

ゆっくりと開始し、急速に加速し、再び減速します。

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

開始から終了まで一定の速度。

cubic-bezier(0, 0, 1, 1)

Ease-in

ゆっくりと始まり、その後加速します。

cubic-bezier(0.42, 0, 1, 1)

Ease-out

高速で始動し、その後減速します。

cubic-bezier(0, 0, 0.58, 1)

カスタムカーブ作成のヒント

x 値を 0 から 1 の間に保ちます。この範囲外の値は、予期しない動作を引き起こす可能性があります。
曲線を視覚化する:インタラクティブグラフを使用して、変更がアニメーションにどのように影響するかを理解します。
実際の要素でテストします。常に実際のUIコンポーネントでカーブをプレビューし、正しい感じがすることを確認してください。
プリセットの保存:将来のプロジェクトに役立つ曲線をブックマークします。