What This Tool Does
CSS animations let you move, fade, rotate, or transform any element on a web page without JavaScript. The Microapp CSS Animation Generator lets you build an animation visually — pick a type (fade, slide, bounce, rotate, etc.), set duration, easing, direction, and iteration count — and copy the resulting CSS code (the keyframes + the animation declaration) ready to paste into your stylesheet.
Runs in your browser with a live preview so you see exactly what your animation will look like before you ship it.
How to Use It
- Pick an animation type from the presets (fade, slide, bounce, rotate, pulse, shake, etc.).
- Adjust duration (how long the animation takes), easing (the speed curve), iteration count (how many times it runs), and direction (forward, reverse, alternate).
- Watch the live preview in the panel.
- Click "Copy CSS" to put the generated code on your clipboard.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 0.5s ease-out forwards;
}.element to any DOM node and it'll fade in once when added to the page.
The Anatomy of a CSS Animation
A CSS animation has two halves: the keyframes (what changes) and the animation property (when, how long, etc.).
Keyframes describe the start, end, and any intermediate states using percentages or the keywords from (= 0%) and to (= 100%):
@keyframes slideUp {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}The animation property applies the keyframes to a specific element with timing details:
.notification {
animation: slideUp 300ms ease-out 100ms 1 forwards;
/* name duration easing delay count fill-mode */
}The Six Most Useful Animation Properties
| Property | What it controls | Common values |
|---|---|---|
| animation-duration | How long one cycle takes | 200ms (snappy), 300-500ms (most UI), 1s+ (decorative) |
| animation-timing-function (easing) | The speed curve | ease-out (most UI), ease-in-out (loops), linear (constant speed) |
| animation-delay | Wait before starting | 0ms (most), 100-300ms (sequential reveals) |
| animation-iteration-count | How many cycles | 1 (one-shot), infinite (loaders), specific count |
| animation-direction | Forward, reverse, or alternate | normal, reverse, alternate (forward then back) |
| animation-fill-mode | What styles persist before/after | forwards (keep end state), backwards (apply start state during delay) |
The "Animate the Right Properties" Rule
Not all CSS properties animate equally well. Animating width, height, top, left, margin, or padding triggers layout on every frame — slow, janky on mobile. Animating transform (translate, rotate, scale) and opacity uses the GPU and runs at 60fps even on weak devices.
The rule of thumb: animate transform and opacity, nothing else. Need to slide an element? Use transform: translateX(100px), not left: 100px. Need to fade something? opacity, not visibility or display.
Common Animation Patterns and When to Use Them
Fade in (300ms ease-out). Page transitions, modal appearances, content reveals. The least attention-demanding entrance.
Slide up (300ms ease-out). Notification toasts, mobile sheet menus. Implies "appearing from below."
Bounce (500ms ease-in-out, several iterations). Attention-grabbing, playful. Use sparingly — overuse feels like a slot machine.
Pulse (1s, infinite, alternate). Loading states, "ready" indicators. Subtle and signals "alive."
Shake (300ms ease-in-out). Form validation errors. Standard convention for "this field is wrong."
Rotate (1s linear infinite). Loading spinners. Constant linear speed is correct here — bouncy easing on a spinner looks broken.
Common Pitfalls
Forgetting fill-mode. Without animation-fill-mode: forwards, the element snaps back to its original state when the animation ends. For a fade-in, you want forwards so it stays visible.
Animating layout properties. Causes scroll jank, especially on mobile. Profile with DevTools' Performance tab if in doubt.
Not respecting prefers-reduced-motion. Some users have vestibular disorders or just dislike animation. Wrap your decorative animations in: @media (prefers-reduced-motion: no-preference) { ... } so they only play for users who haven't opted out.
Animation duration that's too long. 500ms feels snappy in isolation; 500ms repeated 10 times across a page reveal feels glacial. UI animations should usually be 200-300ms.
Related Tools
For sizing animation values in CSS units, use the CSS Unit Converter. To pick or convert colors used inside animations, the Color Converter handles all formats. To generate CSS gradients (often paired with animation for color transitions), see the Gradient Generator.