Animate
Pick from 16 named animation presets covering the patterns developers actually need: fade-in/out, slide directions, scale, bounce, shake, pulse, spin, flip, wobble, swing, zoom. Each preset comes with sensible defaults you can tune — duration, easing, delay, iteration count and direction. The generator outputs the complete @keyframes rule plus the animation shorthand, ready to paste.
infinite + alternate for loaders and breathing effects. Use 1 + forwards for entrances that stick.@keyframes rule and the animation shorthand. Drop both into your stylesheet.Easing is the single biggest factor in whether an animation feels professional or amateur. Quick guide:
| Easing | Feel | Best For |
|---|---|---|
ease-out | Fast in, decelerates to stop | Entrances, things arriving on screen |
ease-in | Slow start, accelerates | Exits, things leaving the screen |
ease-in-out | Symmetric, soft on both ends | Loops, breathing/pulse effects, state changes |
linear | Constant speed, mechanical | Spinners, marquees, anything continuous |
| spring (overshoot) | Goes past target then settles | Pop-ins, attention-getters, success states |
| elastic | Pulls back then snaps forward | Playful UI, kid/game contexts |
The Material Design guidelines and 20 years of UX research converge on a tight range. Anything outside it feels wrong:
The "perceived performance" rule: if you can't tell whether something animated or just snapped, the animation is too fast. If you're waiting for it to finish, it's too slow.
Common confusion. Quick rule:
transition when you have two clear states and something (hover, focus, class change) flips between them.animation with @keyframes when you need multiple steps, loops, or autonomy from a trigger.Modern browsers can animate any CSS property — but only some are GPU-accelerated. Animating the rest forces layout recalculation every frame and tanks performance, especially on mobile.
| Property | Performance | Equivalent |
|---|---|---|
transform | Excellent (GPU) | — |
opacity | Excellent (GPU) | — |
filter | OK (GPU, but heavier) | Use sparingly |
top, left, width, height | Poor (causes reflow) | Use transform: translate() / scale() |
margin, padding | Poor (causes reflow) | Wrap in a transformable element |
background-color | OK on small elements | Avoid on full-screen |
Every preset in this generator uses only transform and opacity for this reason. They'll run smoothly even on low-end mobile devices.
prefers-reduced-motionSome users get nauseous or distracted by animations. Browsers expose this preference via a media query. Always wrap decorative animations:
@media (prefers-reduced-motion: no-preference) {
.my-element {
animation: fadeIn 0.4s ease-out forwards;
}
}
This pattern means the animation only runs for users who haven't opted out. The element will still appear — just without motion. Skipping this is bad practice and in some jurisdictions an accessibility compliance issue.
CSS animations are universal — supported in every browser since IE 10. No prefixes, no fallbacks needed. The only modern caveat is @property for animating custom property values, which needs Chrome 85+, Firefox 128+, Safari 16.4+.
A transition animates between two states triggered by something (hover, class change, focus). An animation runs autonomously using @keyframes that define multiple steps — it can loop, have multiple stages, and run without any trigger. Use transition for hover effects and state changes; use animation for entrances, loaders, attention-getters and looping effects.
Define @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } then apply animation: fadeIn 0.4s ease-out forwards to the element. The fade-in preset above outputs this exact pattern with tunable duration and easing. Add forwards so the element stays visible after the animation ends.
For most fade-ins use ease-out — it starts fast and decelerates, which feels natural for entrances. ease-in feels sluggish for entrances; linear feels mechanical. For exits, ease-in is correct because the user expects the element to "leave" quickly at the end.
Set animation-iteration-count: 1 (the default) and animation-fill-mode: forwards so the element keeps its final state after the animation ends. Without forwards, the element will snap back to its original state. The generator above defaults to this combination.
Most commonly because you're animating layout properties (width, height, top, left) instead of compositor-only properties (transform, opacity). Switch to transform and opacity for smooth 60fps animations. The performance table above shows which properties are safe.
Yes — comma-separate them: animation: fadeIn 0.4s ease-out, slideUp 0.4s ease-out 0.1s. Each can have its own duration, delay and easing. This is useful for compound effects like fade-in combined with slide-up.
Apply the animation property inside a :hover selector rather than the base element. The animation will restart each time the user hovers. Toggle "Trigger on hover" in the generator above to output this pattern automatically.
Want to combine animations with other CSS effects? Pair this with our CSS Filters for blur/glow transitions, or box-shadow for animated elevation effects.