Easing for @keyframes Animations

Pick the right animation-timing-function for CSS keyframe animations.

Níl gá le logáil isteach

Drag the teal & rose handles to shape the curve

Motion preview

Width transition

CSS value

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

Presets

💡 The rose and teal handles can pull above or below the box (Y beyond 0-1) to create “overshoot” / bounce effects like back-out and anticipate. X stays within 0-1 (time can’t reverse).

Keyframes tips

🎬

animation-timing-function accepts cubic-bezier() too — copy the value into your @keyframes animation shorthand.

💡

Note: the timing function applies between each keyframe pair, not across the whole animation.

🎯

For looping animations, ease-in-out style curves avoid the jarring stop-start of linear.

Conas a Oibríonn sé

Cuir isteach

Enter your data into the tool above. Everything stays local to your browser.

Próiseas

The tool processes your data instantly in your browser using JavaScript. No server, no waiting.

Íosluchtaigh

Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Cén fáth ár gceann a úsáid?

✓Go hiomlán saor in aisce - gan aon chostais i bhfolach, riamh

✓Níl cuntas, ríomhphost ná logáil isteach ag teastáil

✓Ní fhágann comhaid do ghléas riamh

✓Níl aon teorainn le méid comhaid ar bith

✓Gan comhartha uisce ar aon aschur

Also check out…

🎨

Custom CSS Transition Easing

Design natural-feeling easing for hover effects, m

🤸

Bounce & Overshoot Animations

Create playful spring/bounce motion by pulling con

⚙️

Easing Values for JS Animation Libraries

Get cubic-bezier values for GSAP, Framer Motion, a

📚

Understand How Easing Works

See the relationship between a bezier curve and th

Ceisteanna Coitianta

Back to CSS Cubic-Bezier Easing Generator