CSS Animation Timing & Easing Preview
Shape easing curves by hand. Compare up to four animations at once. Copy clean keyframe code when you are done.
Workspace
Each panel is an independent curve editor. Drag handles, set timing, and hit play to preview them together.
cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(0.25, 0.1, 0.25, 1)
cubic-bezier(0.6, -0.2, 0.2, 1.4)
cubic-bezier(0, 0, 1, 1)
Curated Presets
Common motion patterns from real design systems. Click a preset to load it into the first empty panel, or pick a specific panel from the dropdown.
Your Saved Curves
No saved curves yet. Click the star icon on any panel to save it here.
Generated Keyframe Code
Copy a complete @keyframes block for each active curve. The code uses transform for smooth GPU-accelerated motion.
Motion Reference
Common Mistakes
- Animating layout properties. Changing width, height, margin, or top/left forces the browser to recalculate layout every frame. Use transform: translate() and scale() instead.
- Too many simultaneous animations. Each animated element costs GPU memory. Keep it under 10 to 15 elements on screen at once for smooth 60fps.
- Ignoring prefers-reduced-motion. Some users get dizzy from motion. Wrap your animations in a media query:
@media (prefers-reduced-motion: no-preference) { ... } - Using ease for everything. The default ease curve is fine for small state changes. For entrances, exits, and page transitions, a custom curve gives your product a distinct feel.
Duration Guidelines
- 100 to 200ms for micro-interactions like button hover or toggle switch.
- 200 to 300ms for small UI changes like tooltip appear, badge pop, or icon state change.
- 300 to 500ms for panel slides, modal opens, and card expansions.
- 500 to 800ms for page transitions and large layout shifts. Anything over 800ms starts to feel sluggish.
Curve Cheat Sheet
| Name | P1 | P2 | Use Case |
|---|---|---|---|
| linear | 0, 0 | 1, 1 | Progress bars, timers |
| ease | 0.25, 0.1 | 0.25, 1 | Default, small changes |
| ease-in | 0.42, 0 | 1, 1 | Exits, dismissals |
| ease-out | 0, 0 | 0.58, 1 | Entrances, reveals |
| material std | 0.4, 0 | 0.2, 1 | Shared axis transitions |
| iOS ease | 0.25, 0.1 | 0.25, 1 | Apple-style motion |
Performance Tips
- Use
will-change: transformsparingly. Add it before the animation starts and remove it after. Leaving it on permanently eats memory. - Opacity and transform are the only two properties that skip layout and paint. Stick to them for the smoothest results.
- If you must animate a layout property, isolate it in its own compositing layer with
contain: layoutto limit the blast radius. - Test on a mid-range phone. A 60fps animation on a flagship device can drop to 20fps on a budget phone.
Why This Exists
Picking the right animation curve used to mean editing a value, saving, switching to the browser, refreshing, and repeating. That loop kills momentum when you are trying to find the right feel for a transition.
This workspace puts the curve editor, the motion preview, and the generated code on one screen. You drag a handle and see the ball move instantly. You compare four curves side by side and spot the difference in a second. When it feels right, you copy the code and paste it into your project.
Everything runs in your browser. No accounts, no tracking, no network requests. Your saved curves live in localStorage on your machine. Share a setup by copying the link, which encodes all parameters into the URL.
Version 1.0.0 · Last updated 2026