ボタンやパネルの動きを調整
制御点を動かしてアニメーションを繰り返し再生し、目的に合う加速・減速の曲線を探せます。
CSS cubic-bezierイージング生成
CSS cubic-bezierイージング生成
2つの制御点をドラッグしてCSSアニメーションやトランジションのcubic-bezier曲線を作り、動きをプレビューします。
主な機能
- SVGグラフ上の2つの制御点をドラッグしてイージング曲線を編集します。
- CSSで有効なX座標0〜1を維持し、Y座標は-0.5〜1.5のオーバーシュートに対応します。
- linear、ease、ease-in、ease-out、ease-in-outのプリセットがあります。
- ボールが動くアニメーションを再生し、加速と減速を確認できます。
- cubic-bezier()値またはtransition-timing-function宣言をコピーできます。
使い方
- プリセットを選ぶか、グラフ上の2つのハンドルをドラッグします。
- アニメーションプレビューで動きの感触を確認します。
- cubic-bezier値または完全なCSS宣言をコピーします。
活用例
CSSイージング値を共有
linearやease系プリセットから調整し、cubic-bezier値またはtransition-timing-function宣言全体をコピーできます。
プライバシー
曲線編集、アニメーションプレビュー、CSS生成はブラウザ内で処理されます。
よくある質問
- 標準のCSSイージングプリセットから始められますか？
- はい。linear、ease、ease-in、ease-out、ease-in-outを選び、2つの制御点を調整できます。
- どの形式で結果をコピーできますか？
- cubic-bezier(x1, y1, x2, y2)の値と、transition-timing-function宣言全体をそれぞれコピーできます。
関連ツール
- CSSボックスシャドウ生成オフセット、ぼかし、広がり、色、不透明度、内側シャドウを視覚的に調整し、重ねたCSS box-shadowを作成します。
- 線形・放射CSSグラデーション生成線形・放射グラデーションの方向、形、カラーストップ、位置を視覚的に編集し、background CSSをコピーします。
- HTML・CSS・JavaScriptコードプレイグラウンドHTML、CSS、JavaScriptを編集し、サンドボックス化したiframeのプレビューとコンソールを確認して、単体HTMLをダウンロードします。
- カラーピッカー | 画像・画面から色を取得HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。