CSS Animation Generator
The CSS Animation Generator creates @keyframes animations from 14 presets such as fade in, slide in, bounce in, pulse, spin, shake and zoom, with controls for duration, timing function and iteration count.
About this tool
The CSS Animation Generator creates @keyframes animations from 14 presets such as fade in, slide in, bounce in, pulse, spin, shake and zoom, with controls for duration, timing function and iteration count.
How to use it
- Choose an animation preset.
- Set the duration, timing function and iteration count.
- Press Replay to preview it.
- Click Copy CSS to get the @keyframes and animation rule.
Good to know
- A CSS animation has two parts: a @keyframes rule and an animation property on the element.
- Animating transform and opacity is usually the smoothest choice for performance.
- Timing functions such as ease-out start fast and slow down, which feels natural for entrances.
- Respect the prefers-reduced-motion media query for users who have asked for less motion.
- An infinite iteration count suits loaders; entrance effects usually run once.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I create a CSS animation?
Define the motion in a @keyframes rule, then attach it with animation: name duration timing iteration. The generator writes both for you.
What is the difference between CSS transitions and animations?
Transitions animate between two states when a property changes, such as on hover. Animations use keyframes, can run automatically and can loop.
How do I make an animation loop forever?
Set the iteration count to infinite, for example animation: spin 1s linear infinite.
Do CSS animations affect accessibility?
Large or continuous motion can bother some users. Wrap non-essential animations in @media (prefers-reduced-motion: no-preference).