📈 CSS cubic-bezier エディタ
2 つのコントロールポイントをドラッグして cubic-bezier を編集。プレビューアニメーションで動きを確認できます。
✅ 完全無料・登録不要・サーバー送信なし
🔒 プライバシーについて
- ・すべての処理はブラウザ内で完結します
- ・入力データは一切サーバーに送信されません
- ・保存ログ・履歴・データベース等は存在しません
- ・登録・ログイン・課金は一切不要です
青と桃色の点をドラッグしてカーブを編集
プレビュー
プリセット
📖 使い方
-
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 プロパティで使えます。