ツール一覧 / cubic-bezierイージングエディタ

cubic-bezier イージングエディタ

2つのハンドルをドラッグして、CSSアニメーションの緩急(cubic-bezier)を作れます。 実際の動きをプレビューで確認しながら、transition用のコードをコピーできます。

無料登録不要ブラウザ内で完結

カーブを編集

プレビュー

クリック/自動で往復します

動きの土台ごと整えるなら

AETHERは、アニメーションの緩急やタイミングが統一されたWordPressテーマ。動きに一貫性が出ます。

AETHERを見る

ほかの道具も見る

72本すべてを見る →

cubic-bezierとは

アニメーションの速度の変化(緩急)を指定するものです。 4つの数値 cubic-bezier(x1, y1, x2, y2) で曲線を表し、 始めをゆっくり・終わりを速く、といった動きを細かく調整できます。

自然に見えるコツ

多くの場合、動き始めは少し速く、終わりに向けてゆっくり止まる(ease-out系)と自然に見えます。 逆に、機械的に等速(linear)だと硬い印象になります。まずはプリセットの「ease-out」から試すのがおすすめです。

行き過ぎる動き(オーバーシュート)

ハンドルを枠の外まで動かすと、一度行き過ぎて戻る「弾む」ような動きになります。 ポップな演出に向きますが、多用すると落ち着きがなくなるので、ここぞという場面に。

このツールについて

設定はすべてブラウザ内で処理され、サーバーに送信されることはありません。