Search tools

Search for a command to run...

CSS Animation Generator (Keyframes)

Create CSS keyframe animations visually — fade, slide, bounce, pulse, shake, spin and more — tune duration, easing, delay and repeat with a live preview, then copy the CSS.

How to use

  1. 1Pick a preset animation.
  2. 2Adjust duration, delay, easing, repeat and direction — or edit the keyframes directly.
  3. 3Copy the CSS and add the class to your element.

Frequently asked questions

Does the CSS respect reduced motion?

Yes — the output includes a prefers-reduced-motion rule that turns the animation off for people who've asked for less motion.

Can I animate on scroll or hover?

Use the class in a :hover rule, or add it with JavaScript/IntersectionObserver when the element scrolls into view.

Which properties animate smoothly?

transform and opacity are GPU-friendly; avoid animating width, height or top/left for smooth performance.