← すべてのテキストツール

Cubic Bezierジェネレーター

曲線をドラッグしてCSSイージングをデザインし、アニメーションを確認してタイミング関数をコピーします。

  • 無料
  • 登録不要
  • どの端末でも使える

約Cubic Bezierジェネレーター

ベジェ曲線の2つのコントロールハンドルをドラッグして、CSSのトランジションやアニメーション用のイージングを自在にデザインし、ボールがその動きでアニメーションする様子を見て、cubic-bezier(x1, y1, x2, y2)の値をコピーできます。xの値は0から1の間にとどめる必要がありますが、yはバウンス効果のために範囲を超えられます。

Cubic Bezierジェネレーターの使い方

  1. 曲線の2つのハンドルをドラッグして、イージングの形を整えてください。
  2. 再生を押して、タイミングに合わせて要素が動くのを確認してください。
  3. cubic-bezier関数を、トランジションまたはアニメーションにコピーしてください。

このツールを使う理由

別名

よくある質問

cubic-bezierの4つの数字は、何を意味しますか?

速度曲線上の2つのコントロールポイントのx座標とy座標です。傾きが急な部分は動きが速く、緩やかな部分は動きが遅くなります。

曲線はボックスの外に出られますか?

縦方向の値は、0や1を超えることがあり、オーバーシュートやバウンスが生まれます。横方向の値は、0と1の間にとどまる必要があります。

インターフェースの動きには、どの曲線が自然に感じられますか?

最初が速く、最後がゆっくりな、イーズアウト形式の曲線は、画面に入ってくる要素に対して、反応が良く感じられます。まず短い時間から試してください。

Cubic Bezierジェネレーターは無料ですか?

はい。ToolipediaのCubic Bezierジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか?

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか?

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか?

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

Cubic Bezierジェネレーター を自分のサイトに置けますか?

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール