直感的なイージング曲線の作成
CSSのアニメーションやトランジションにおいて、動きの滑らかさやメリハリを決定するのがイージングです。本ツールでは、キャンバス上のハンドルをドラッグするだけで、cubic-bezier(x1, y1, x2, y2)の4つのパラメーターを直感的に調整できます。
X軸はアニメーションの経過時間（0から1の範囲）、Y軸はプロパティの変化量を示しています。数値を直接手入力して試行錯誤する手間を省き、視覚的に理想のカーブを描くことが可能です。
リアルタイムプレビューとオーバーシュート
調整したイージング曲線は、画面上のデモ要素（ボールなど）に即座に反映され、実際の動きをリアルタイムでプレビューできます。アニメーションのタイミングが意図した通りになっているか、その場で確認しながら微調整を繰り返すことができます。
さらに、Y軸の値を0〜1の範囲外にドラッグすることで、要素が目標値を一度通り越して戻ってくるような「オーバーシュート（バウンス）」効果を簡単に作成できます。ただし、時間が逆行することは物理的にあり得ないため、X軸の値は常に0から1の範囲内に制限される仕様となっています。
クライアントサイドでの完結とパフォーマンス
本ツールは、すべての計算と描画をブラウザ側のJavaScriptおよびCanvas APIを使用して処理しています。作成した曲線のデータや操作履歴が外部のサーバーに送信されることは一切なく、完全にセキュアな環境で動作します。
完成したcubic-bezierのCSSコードはワンクリックでクリップボードにコピーできるため、開発中のスタイルシートへすぐに組み込んでUIのブラッシュアップに活用していただけます。外部ツールとの複雑な連携は不要で、シンプルにコードを生成することに特化しています。
よくある質問
アニメーションに適したイージング曲線はどのように選べばよいですか？
アニメーションの目的に応じて選択します。UIの開閉やフェードインには、動きの終端がゆっくりになる「ease-out」ベースの曲線が自然に感じられます。逆に、要素が画面外へ退出する際は、徐々に加速する「ease-in」が適しています。
バウンスやオーバーシュートのような効果を持つ曲線は作成できますか？
はい、作成可能です。コントロールポイントのY座標（縦軸）を0未満、または1より大きい位置へドラッグしてください。これにより、目標値を一度通り過ぎてから戻るような弾む動きを表現できます。
UIのトランジションに推奨される再生時間はどのくらいですか？
一般的なWebインターフェースのトランジションでは、200ms〜300ms（0.2秒〜0.3秒）程度が推奨されます。これより長いとユーザーを待たせている印象を与え、短すぎると変化に気づきにくくなります。
作成した曲線のデータがサーバーに送信されることはありますか？
いいえ、データのアップロードや保存は一切行われません。すべての計算とプレビューはご利用のブラウザ上でローカルに実行されるため、外部に情報が送信されることはありません。
生成された曲線はすべてのブラウザやCSS環境で使用できますか？
はい。生成されたコードは標準的なCSSプロパティであるため、すべてのモダンブラウザでそのままご利用いただけます。transition-timing-functionやanimation-timing-functionの値としてペーストするだけで機能します。
ツールの不具合や改善案はありますか。 フィードバックを送る