Guides ·
How to use CSS Animation Generator
CSS Animation Generator. Keyframe animations with presets. Animating transform and opacity is cheap because the GPU handles it; animating width, height or…
The short answer
To create a CSS animation, choose a preset (fade, slide, bounce, pulse, spin, shake, zoom) or edit the keyframes, set duration, easing, delay, iterations and direction, preview it live and copy the @keyframes and animation CSS.
It runs in your browser. What you enter is not uploaded.
How to use it
Type or paste your input into the CSS Animation Generator.
Choose any options you need.
See the result update instantly.
Copy the result or download it.
Limits worth knowing
Do CSS animations hurt performance? Animating transform and opacity is cheap because the GPU handles it; animating width, height or top causes layout work.
How do I respect reduced motion? The generated CSS includes a prefers-reduced-motion media query that turns the animation off for users who ask for less motion.