📈 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 プロパティで使えます。
🔗 関連ツール
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
✅
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。