What is a cubic-bezier easing function?

A cubic Bezier curve is defined by four control points: a fixed start (0, 0), a fixed end (1, 1), and two adjustable points P1 (x1, y1) and P2 (x2, y2). CSS uses the shape of that curve as the time-to-progress mapping for a transition or animation. The X axis is time (0 to 1), and the Y axis is animation progress (0 to 1). Different curve shapes produce ease-in, ease-out, ease-in-out, or custom easings.

Why can the Y values be negative or greater than 1?

When Y goes outside [0, 1], the animation overshoots. A control point with y > 1 makes the value briefly exceed its end position before settling — useful for spring-like or playful 'bounce' effects. A negative y at the start makes the animation pull back before moving forward. X must stay in [0, 1] to keep the easing single-valued (no time-travel).

Is cubic-bezier supported in all browsers?

Yes. cubic-bezier() is part of CSS Transitions Module Level 1 and CSS Animations Module Level 1, supported in every browser since around 2010. The newer steps() and linear() functions joined it later for staircase and multi-segment curves, but cubic-bezier remains the workhorse for organic motion.

Should I use spring() or cubic-bezier?

CSS spring() (proposed but not yet shipped in any browser as of 2026) is physically based — you specify mass, stiffness, damping. cubic-bezier is artistic — you draw the curve you want. For predictable, designer-controlled motion, cubic-bezier wins. For physics-driven UIs (drag-to-snap, scroll-coupled motion), wait for spring() or use a JS animation library like Framer Motion.

What's the difference between transition-timing-function and animation-timing-function?

Both accept the same value, but they apply at different scopes. transition-timing-function eases the change between two state values (e.g., :hover to default). animation-timing-function eases each segment between two keyframes; if you set it on the @keyframes itself or on the animation shorthand, it applies to all segments unless overridden in a specific keyframe.

CSS cubic-bezierジェネレーター

ドラッグ可能な制御点エディターとライブアニメーションプレビューで、CSS cubic-bezierイージングカーブを視覚的に作成します。

プリセット

カーブ

色付きの制御点をドラッグしてカーブを形作ります。Yはオーバーシュートのために0未満や1超まで拡張できます。

アニメーション時間: 1000ms

ライブプレビュー

色の濃さは、等間隔の11点でカーブをサンプリングしています。

CSS出力

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

/* with shorthand */
transition: all 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);

/* on a keyframe animation */
animation: my-anim 1000ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;

使い方

ドラッグ可能な制御点エディターとライブアニメーションプレビューで、CSS cubic-bezierイージングカーブを視覚的に作成します。

1Click a preset (ease, ease-in-out, ease-out-back, etc.) to load a starting curve.
2Drag the two colored control points on the curve panel to shape the easing — Y can extend beyond 0 and 1 for overshoot.
3Watch the live animation preview to feel the motion. Adjust the duration slider for slower or faster playback.
4Fine-tune by typing exact values into the x1 / y1 / x2 / y2 number fields.
5Click 'Copy' to copy the cubic-bezier(...) value, then paste it into your CSS transition or animation.

主な機能

Drag-to-edit control points with overshoot range — Y values can go negative or above 1 for spring-like motion
Eight presets including overshoot variants (ease-out-back, ease-in-out-back, elastic)
Live demo with adjustable duration and replay button — feel the curve before copying it
Numeric x1/y1/x2/y2 fields synced with the visual editor — precise tuning either way
Output includes the standalone cubic-bezier() value plus complete transition/animation snippets

よくある質問

詳しく読む

Cubic-Bezier Easing — How to Make CSS Animations That Feel Right