Why it matters
Good motion makes an interface feel quick and polished; bad motion makes it feel slow or even makes people feel ill. The easing curve matters more than the duration: an ease-out curve starts fast and settles, so things appear to respond instantly.
Some people get dizzy or nauseous from movement on screen and ask their device to reduce motion. Respecting that setting is part of WCAG 2.3.3 and costs one media query, so every snippet this tool writes includes it.
How to use it
- Pick a preset or drag the two handles on the curve.
- Set a duration and an entrance animation, then press Play.
- Compare your curve's dot with the linear one to feel the difference.
- Copy or download the CSS.
FAQ
What duration should I use?
200 to 300ms for small things like buttons and menus, 300 to 500ms for larger panels, and rarely more than 600ms. Longer animations make an interface feel slow.
Why can the curve go above 1?
A y value above 1 or below 0 overshoots and comes back, which gives the 'back' and springy effects. The x values must stay between 0 and 1.
What happens with reduced motion?
The CSS switches the animation off for anyone whose device asks for reduced motion, so content simply appears.
Can I use it with JavaScript animations?
Yes. The cubic-bezier() value works as the easing in the Web Animations API, and most animation libraries accept the four numbers.
