CSSキュービックベジェ曲線ジェネレータ
名前付きのイージングプリセット (ease、ease-in-out、Material スタイルの Sine/Quad/Cubic/Back 曲線…) または独自の X1/Y1/X2/Y2 制御点から CSS cubic-bezier() タイミング関数を構築し、ライブの SVG 曲線プレビューを表示します。ブラウザで完全に実行されます。
入力
名前付きのイージング曲線を選択するか、「カスタム」を選択して独自の制御点を設定します。
以下のサンプル トランジション行のみに影響します。
出力
Your curve will appear here.
| プロパティ | 値 |
|---|---|
| No data yet | |
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-cubic-bezier-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"preset": "ease",
"x1": "0.25",
"y1": "0.1",
"x2": "0.25",
"y2": "1",
"duration": "1"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-cubic-bezier-generator` tool (CSS Cubic Bezier Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-cubic-bezier-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSキュービックベジェ曲線ジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このキュービックベジェジェネレータについて
4 つの制御点の数値を、貼り付ける準備ができた CSS cubic-bezier(x1, y1, x2, y2) タイミング関数に変換します。これは transition-timing-function または animation-timing-function に渡す値と同じです。また、これらの数値が説明する正確な曲線を描画するため、配置前にイージングを確認できます。29 個の名前付きプリセット (標準の ease/ease-in/ease-out/ease-in-out/linear キーワード、plus Material Design 全体で使用される easings.net によって普及した Sine、Quad、Cubic、Quart、Quint、Expo、Circ、Back の完全なファミリー) の 1 つを選択するか、カスタムに切り替えて独自の X1/Y1/X2/Y2 を設定します。
使い方
- ドロップダウンからプリセットを選択するか、カスタムを選択します。
- 「カスタム」を選択した場合は、X1、Y1、X2、Y2 を設定します。X1 と X2 は 0～1 に制限されます (CSS 仕様で必須)。Y1 と Y2 は任意の数値です。
- CSS コードブロックをコピーします。これには
transition-timing-function/animation-timing-function宣言と、選択した期間での動作例のtransition:が含まれます。 - 曲線プレビューと曲線の詳細テーブルを確認します。これはイージングが標準的なイージング曲線であるか、オーバーシュートを行う曲線であるかを示します。
X1、Y1、X2、Y2 は実際に何を制御するのか?
CSS キュービックベジェ曲線は常に (0, 0) から始まり、(1, 1) で終了します。これら 2 つの点は仕様で固定されており、構成できません。X1/Y1 と X2/Y2 は、ベクトル描画ツール内のベジェ曲線上のハンドルと同じ方法で、曲線をそれらの間で引く 2 つの制御点です。X はアニメーションの期間全体の進行状況を表します (したがって、0 と 1 の間に留まる必要があります。この範囲外の値は、全体の cubic-bezier() を無効な CSS にします。ブラウザはそれを無視します)。Y はアニメーション対象のプロパティ全体の進行状況を表します。0 未満または 1 を超えることが許可されています。
曲線プレビューがボックスの外に出るのはなぜですか?
Y1 または Y2 が 0～1 の範囲外になるときは常に、アニメーション化される値は一時的にターゲットを超えるか、安定する前に後ろに下がります。これは ease-in-back (移動前のわずかな「ウインドアップ」) や ease-out-back (安定化前のわずかなオーバーシュート) などの曲線が使用される理由です。これはまったく有効な CSS であり、エラーではありません。プレビューの点線の参照ボックスは、単にそれを見えるようにします。キュービックベジェ曲線は常にその 4 つのポイントによって形成される形状内に留まるため、Y1 と Y2 が 0～1 内にあるときはいつでも、全体の曲線も保証されます。これが詳細テーブルが報告する「標準的なイージング曲線」のケースです。
私のデータはプライベートですか?
はい。すべて — CSS 文字列の構築と SVG プレビューの描画 — はブラウザで完全に実行されます。何もアップロードされたり、記録されたりしません。