How to use the CSS Animation Generator
- 1. Choose an animationPick from fades, slides, zoom, bounce, pulse, shake, spin, flip and more.
- 2. Tune the timingSet duration, delay, easing, repeat count, direction and fill mode, and watch the preview.
- 3. Get the CSSCopy the @keyframes rule and class, or download them as a .css file.
How CSS animations work
A CSS animation has two parts. The @keyframes rule describes what changes, for example moving from translateY(0) up to translateY(-30px) and back. The animation shorthand on a class says how: how long one cycle lasts, which timing function shapes the speed, how many times it repeats, in which direction, and whether the first and last frames stick before and after it runs (the fill mode). Your code is processed in your browser and never uploaded.
Every preset animates only transform and opacity. Browsers can run those changes on the GPU without recalculating layout, so they stay smooth even on budget phones. Animating width, height, top or margin forces layout on every frame and can stutter.
Worked example
With the defaults (Bounce, 1 second, ease, forever) the tool produces @keyframes bounce with the box at rest at 0%, 20%, 50%, 80% and 100%, lifted 30px at 40% and 15px at 60%. The class rule is .bounce { animation: bounce 1s ease 0s infinite normal both; }. Because Turn off for people who prefer reduced motion is ticked, a @media (prefers-reduced-motion: reduce) block sets animation: none for that class. Add class="bounce" to any element to use it.
Tips
- Entrance animations (fade, slide, zoom) usually play once with fill mode both, so the element stays in its final state.
- Keep looping motion small and slow; constant movement near text distracts readers.
- The Back timing uses
cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly for a springy feel. - All 14 presets were checked in Chromium, and every declaration was accepted.
Frequently asked questions
Will the animation work in every browser?
Yes. @keyframes and the animation shorthand work in all current browsers without prefixes.
Can I rename the class?
Yes. Type any valid class name; the keyframes keep the preset name so several classes can share them.
Is the CSS animation generator free?
Yes. You can open the CSS animation generator, paste code and change every setting without signing up. When you get the CSS for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.