CSS Animation Generator
Keyframe animations (bounce, pulse, shake, fade…) with timing controls and CSS.
About this tool
Choose one of 15 effects, then set the duration, delay, easing curve, number of repeats, direction and fill mode, and a class name. The preview box plays the animation live, Replay restarts it, and Copy CSS gives you the @keyframes rule, the class with the animation shorthand and a reduced-motion rule ready to paste.
How CSS animations work
A CSS animation has two parts. The @keyframes rule defines what the element looks like at points through the animation, using from and to or percentages such as 0%, 50% and 100%. The animation property attaches those keyframes to an element and controls the timing: duration (how long one cycle takes), delay (how long before it starts), timing function (the easing curve, such as ease-out or a bouncy cubic-bezier), iteration count (a number or infinite), direction (normal, reverse or alternating) and fill mode, which decides whether the first and last keyframes' styles apply before the animation starts and after it ends. Animating transform and opacity is the most efficient choice, because browsers can usually hand them to the graphics processor without recalculating the page layout, which keeps motion smooth. Effects like bounce and shake draw attention to a button or an error; fades and slides suit content arriving on screen; spin is for loading indicators. The generated CSS includes a prefers-reduced-motion media query that turns the animation off for people who've asked their device to minimise motion, which matters for anyone with vestibular disorders. Honest limits: keyframe transforms replace any transform the element already has, so combine them deliberately, and avoid endless decorative motion near text people need to read. The cubic-bezier editor designs custom easing curves and the CSS loader generator makes spinners.
Frequently asked questions
How do I make an animation repeat forever?
Set the iteration count to infinite: animation: pulse 1s ease infinite;
What does animation-fill-mode both do?
It applies the first keyframe's styles during the delay and keeps the last keyframe's styles after the animation ends.
How do I respect reduced motion settings?
Wrap a rule in @media (prefers-reduced-motion: reduce) that sets animation: none; the generated CSS includes one.
Is my data saved?
No. The CSS is generated in your browser and nothing is stored or sent.