CSSツール/イージング関数エディター
イージング関数エディター
スムーズなアニメーションのためのカスタムキュービックベジェイージング関数をデザイン
曲線エディター
コントロールポイントをドラッグして曲線を調整
コントロール
1s
アニメーションプレビュー
プリセット
CSSコード
Loading...CSS Easing Function Guide
Learn how to create smooth and natural animations
What is Easing?
Easing functions specify the rate of change of an animation over time. The cubic-bezier function defines a curve with four control points, allowing you to create custom acceleration and deceleration patterns. This makes animations feel more natural and engaging than linear motion.
How to Use This Tool
- Drag the control points on the curve to adjust the easing
- Use preset buttons for common easing functions
- Preview the animation to see the effect in action
- Copy the cubic-bezier value to use in your CSS
Pro Tips
- Use ease-out for entering animations and ease-in for exiting
- Values outside 0-1 on the Y axis create overshoot effects
- Linear easing works best for opacity and color transitions
Browser Support
The cubic-bezier() function is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the CSS transitions and animations specifications with excellent compatibility.
よくある質問
cubic-bezierの4つの値は何を意味しますか？
cubic-bezier(x1, y1, x2, y2)では、x1、y1が最初の制御点、x2、y2が2番目の制御点です。x値は0〜1の範囲である必要があり（時間を表す）、y値は範囲外でも可能です（オーバーシュート効果）。開始点(0,0)と終了点(1,1)は固定されています。
ease、ease-in、ease-outの違いは何ですか？
easeは開始と終了がスムーズで中間が速いです。ease-inはゆっくり開始して加速します（加速）。ease-outは速く開始して減速します（減速）。ease-in-outは開始と終了の両方が遅いです。UIアニメーションには主にease-outを使用します。
オーバーシュート（弾性）効果はどのように作成しますか？
y値が0より小さいか1より大きいcubic-bezierを使用します。例：cubic-bezier(0.68, -0.55, 0.27, 1.55)は、開始と終了でターゲットを少しオーバーしてから戻る弾性効果を作成します。このような効果はボタンクリックやモーダル表示に活力を与えます。
steps()関数はいつ使用しますか？
steps()関数は連続的ではなく段階的なアニメーションを作成します。スプライトアニメーション、タイプライター効果、時計の秒針のような不連続な動きに適しています。steps(5)はアニメーションを5段階に分けて実行します。
どのイージング関数を選べばよいですか？
要素が表示されるときはease-out（速く表示されてゆっくり落ち着く）、消えるときはease-in（ゆっくり開始して速く消える）を使用してください。移動アニメーションにはease-in-outが自然です。背景色や透明度の変化にはlinearが適しています。