Cubic Bezierジェネレーター – カスタムCSSイージング曲線を作成
Cubic Bezierジェネレーターは、2つのコントロールポイントをドラッグするか、ease、ease-in-out、backなどのプリセットから始めて、CSSイージング曲線を設計できます。アニメーションをライブでプレビューするための再生時間を設定し、cubic-bezier()の値またはそのまま使えるCSSトランジションのスニペットをコピーします。曲線の数値だけを編集するより視覚的にモーションを調整できます。
Cubic Bezierジェネレーターは、CSSイージング曲線を作成するビジュアルエディターです。数値から曲線を推測するのではなく、2つのコントロールポイントをドラッグしてモーションの変化を確認できます。ease、ease-in-out、backなどの標準プリセットを選び、再生時間を設定してライブアニメーションのプレビューを見ましょう。
曲線はCSSのcubic-bezier()の値で表され、ツールはすぐに使えるトランジションのスニペットも提供できます。標準イージングプリセットから始めるか、コントロールポイントを調整してカスタム曲線を作ります。再生時間の設定はプレビューのタイミングに反映されます。スタイルシートやワークフローに合う結果をコピーしましょう。
cubic-bezier()の値はイージングのタイミングを記述し、CSSのトランジション宣言にはそのイージングと再生時間を含められます。ジェネレーターは曲線の値とすぐに使えるトランジションのスニペットの両方を提供するため、必要なレベルのCSS詳細をコピーできます。結果を見ずに曲線の値を編集するより、ビジュアルプレビューでモーションを比較しやすくなります。
Cubic Bezierジェネレーターは完全にブラウザ上で動作します。入力はお使いのデバイス上で処理され、サーバーへのアップロード、保存、送信は行われません。ページの読み込み後はオフラインでも動作し、無料で利用できます。
このツールは、インターフェース、テスト、フィクスチャ、シードデータ用のイージング値を準備する開発者やDevOpsエンジニアに役立ちます。CSSイージングの仕組みを学ぶ場合も、既存のインタラクションを磨き上げる場合も、曲線を調整してプレビューし、結果をコピーできます。
手順1: ease、ease-in-out、backなどの標準イージングプリセットを選んで、曲線作りを始めます。
手順2: 2つのコントロールポイントをドラッグして曲線を視覚的に調整し、作りたいモーションに整えます。
手順3: 再生時間を設定し、ライブプレビューで曲線がどうアニメーションするか確認します。
手順4: 生成されたcubic-bezier()の値、またはそのまま使えるCSSトランジションのスニペットをコピーします。
用途: プロジェクトで具体的なイージング曲線が必要な場合に、テストケース、フィクスチャ、シードデータ用のcubic-bezier()の値を作ります。
用途: 複数の曲線が一度に必要な場合に、1つずつ手で考えるのではなく、まとめて値を生成します。
用途: ランダムな曲線データが必要な場合に、キーボードの当てずっぽうではなく適切にランダムな値を使います。
用途: コントロールポイントを調整してプレビューしながら、CSSトランジションを視覚的に微調整します。
用途: スタイルシートにコピーする前に、easeやease-in-outなどの標準プリセットとカスタマイズした曲線を比較します。
用途: 再生時間を設定してアニメーションをプレビューし、インターフェースのインタラクションのタイミングを確認します。