Custom CSS Transition Easing
Design natural-feeling easing for hover effects, menus, and UI transitions.
Drag the teal & rose handles to shape the curve
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).
CSS Transitions tips
The default ease can feel generic. A custom curve makes your UI feel intentional and premium.
For entering elements, favour ease-out (fast start, soft landing). For exits, ease-in feels more natural.
Keep UI transitions 150-300ms — the preview here runs slower so you can study the curve, but ship snappier values.
Como funciona
Por que usar o noso?
Also check out…
Bounce & Overshoot Animations
Create playful spring/bounce motion by pulling con
Easing for @keyframes Animations
Pick the right animation-timing-function for CSS k
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