CSS Animation Generator

How to use it

1. Choose one of the five presets: fade, slide, scale, rotate or bounce.
2. Set the duration in milliseconds and, if needed, a delay before it starts.
3. Pick an easing curve - the overshoot cubic-bezier gives entrances extra life.
4. Choose how many times it repeats, from once to infinite.
5. Click Play to watch the preview restart with your settings, then copy the generated CSS.

Common use cases

• Micro-interactions - quick fades and slides for tooltips, toasts and card entrances.
• Loading states - repeating bounce or scale animations for placeholder skeletons.
• Learning keyframes syntax - see how percentage stops map to the motion you observe.
• Prototyping before commit - try timing combinations on a real element instead of guessing values.

Why it stays private

The preview animates a local DOM element with an injected style tag. There is no build step, no upload and no external request.

FAQ

Q: Which animation properties do the presets use? A: Only opacity and transform, which browsers can animate without layout recalculation. That keeps the generated animations smooth even on modest hardware.

Q: Why does the keyframe name start with demo-anim? A: The preview injects the keyframes under that name. Rename it in the copied CSS to whatever fits your project, just keep the name consistent in both the keyframes rule and the animation property.

Q: Can I combine presets? A: Not directly in this tool, but the generated keyframes are plain CSS - copy two presets into one keyframes rule with different percentage stops to compose them.