📈 CSS cubic-bezier エディタ

2 つのコントロールポイントをドラッグして cubic-bezier を編集。プレビューアニメーションで動きを確認できます。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

🔒 プライバシーについて

・すべての処理はブラウザ内で完結します
・入力データは一切サーバーに送信されません
・保存ログ・履歴・データベース等は存在しません
・登録・ログイン・課金は一切不要です

青と桃色の点をドラッグしてカーブを編集

プレビュー

プリセット

CSS

📖 つまずきやすいポイント

2 つのコントロールポイントをドラッグして cubic-bezier() のカーブを作り、動きをその場で確認できます。処理はブラウザ内で完結します。カーブの形は「速度の変化のしかた」を表していて、グラフが急な区間ほど速く動くという読み方をします。ただし、イージングだけを調整しても動きは良くなりません — 実際の印象を決めているのは、カーブと同じかそれ以上に持続時間のほうです。

ケース	何が起きるか	どうする
全部に ease-in-out を使っている	`ease-in-out` は始まりも終わりもゆっくりなので、要素が「出てくる」動きに使うと、最初の一瞬なにも起きていないように見えます。とくにクリックへの反応でこれをやると、押したのに反応が無いと感じる原因になります。人が遅さを感じるのは総時間ではなく「押してから何かが動き出すまで」の時間です。	出現は減速カーブ、消失は加速カーブが定石です。`cubic-bezier(0, 0, .2, 1)` のような ease-out は最初に一気に動いて静かに止まるので、反応が速く感じられます。逆に閉じる・消えるときは `cubic-bezier(.4, 0, 1, 1)` のような ease-in で、じわっと始まってすっと消えるほうが自然です。位置が動くものは ease-out、その場で消えるだけのものは linear で十分です。
カーブを凝っても違いが分からない	持続時間が短すぎます。150ms を下回るとイージングの差はほぼ知覚できず、どのカーブでも同じに見えます。逆に 500ms を超えると、今度は操作の待ち時間として意識され始めます。凝ったカーブが効くのは、その間の帯域だけです。	UI の標準は 150〜300msです。ホバーやフォーカスの色変化は 100〜150ms、モーダルやドロワーの開閉は 200〜300ms、ページ遷移級の大きな動きで 400ms 程度。移動距離が長いほど時間も長く取るのが原則で、画面端から端まで動くものに 150ms を使うと不自然に速く見えます。まず時間を決め、そのうえでカーブを調整してください。
バウンドさせたいのに `cubic-bezier` で作れない	Y 座標は 0〜1 の外に出せますが、X 座標は 0〜1 に制限されています。Y を 1 より大きくすれば行き過ぎて戻るオーバーシュート (`cubic-bezier(.68, -.55, .27, 1.55)` など) は作れますが、行って戻ってまた行く、という複数回のバウンドは 1 本のベジェ曲線では表現できません。ベジェは単調でない往復を持てないためです。	複数回のバウンドが必要なら `@keyframes` でキーフレームを刻むか、`linear()` 関数で折れ線として近似します。ただし、その前に本当に必要か考えてください — 実務の UI でバウンドが効くのは、削除の取り消しや通知の到着のように注意を引きたい一瞬だけです。日常的に触る要素に付けると、数回目からは邪魔になります。

どのカーブを選んでも、アニメーションさせる CSS プロパティのほうが性能への影響は桁違いに大きいです。transform と opacity は合成レイヤーだけで処理されるためレイアウトも再描画も発生しませんが、width / height / top / margin を動かすと毎フレーム、レイアウト計算からやり直します。同じ「右に 100px 動かす」でも、left: 100px と transform: translateX(100px) では負荷がまったく違います。あわせて @media (prefers-reduced-motion: reduce) を必ず用意してください — 前庭障害のある利用者にとって、大きな動きは実際に体調に影響します。

📖 使い方

1

コントロールポイントをドラッグ

青と桃色の 2 点をマウスでドラッグして曲線を変形。曲線が timing function になります。
2

プレビューで確認

再生ボタンで赤い点が動き、実際のイージングを確認できます。
3

CSS をコピー

生成された transition / animation スニペットをコピーして CSS に貼り付け。

❓ よくある質問

入力データはサーバーに送信されますか？

いいえ。すべてブラウザ内で完結します。Network タブで確認可能です。

Y 座標が 0-1 の範囲外でも有効ですか？

はい。Y は 0-1 を超えても有効で、バウンスやオーバーシュート表現に使えます。X は 0-1 に制限されます。

どこで使えますか？

CSS の transition-timing-function および animation-timing-function プロパティで使えます。

🔗 関連ツール

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。