CSS Animation Generator
Pick an effect, tune its timing and copy ready-to-use keyframes. Fifteen common animations, from a quiet fade to a bounce, each with full control over duration, delay, easing, repetition and direction.
- Runs in your browser
- No sign-up
- Free to use
Animation
Timing
How to use CSS Animation Generator
- Choose an effect such as fade in, slide up, bounce or rotate.
- Set the duration, delay and, for slide effects, the distance.
- Pick the easing, the number of repetitions, the direction and the fill mode.
- Select Replay to watch it again, then copy the CSS.
CSS Animation Generator features
Fifteen effects
Entrances (fade, slide, zoom, flip), attention seekers (bounce, pulse, shake, swing, heartbeat, wobble) and continuous rotation.
Complete timing control
Duration, delay, easing curves, iteration count, direction and fill mode.
Compact shorthand
The animation property is written in shorthand, leaving out values that are at their default.
Reduced-motion support
An optional media query switches the animation off for visitors who asked their system for less motion.
Replay button
Re-run the animation as often as you like while adjusting it.
Cheap to animate
All effects use transform and opacity, the properties browsers can animate most smoothly.
When to use CSS Animation Generator
- Revealing content as it enters a page or a dialog.
- Drawing attention to a notification, a badge or a form error.
- Loading indicators and other looping animations.
- Learning how keyframes and the animation shorthand fit together.
CSS Animation Generator FAQ
How does a CSS animation work?
Two parts work together. A @keyframes rule describes what the element looks like at points along the way, written as percentages or as from and to. The animation property on the element then names those keyframes and says how long they take, how the speed changes, when they start and how often they repeat.
What does the fill mode do?
It decides which styles apply outside the running time. forwards keeps the final frame after the animation ends. backwards applies the first frame during the delay. both does both, which is the usual choice for entrance animations, so that an element does not flash in its final position before the animation starts.
What is easing?
The speed curve of the animation. linear moves at constant speed. ease-out starts quickly and slows down, which feels natural for things entering the screen. ease-in does the opposite and suits exits. A cubic-bezier curve can overshoot the target slightly for a springy effect.
Why do the effects only use transform and opacity?
Browsers can animate these two properties on the graphics card without recalculating layout, so the motion stays smooth even on slower devices. Animating width, height, margin or top forces layout work on every frame and often stutters.
What is prefers-reduced-motion?
A system setting for people who are made unwell or distracted by motion. The media query lets a site respect it. Entrance effects can simply be switched off; essential feedback can be replaced with a gentle fade.
How do I start an animation when an element scrolls into view?
CSS runs the animation as soon as the class is applied. Add the class from JavaScript with an IntersectionObserver when the element becomes visible, or use scroll-driven animations in browsers that support them.
Using motion with purpose
Animation in an interface does a job. It shows where something came from, confirms that an action had an effect, or points at the thing that needs attention. Motion that does none of these is decoration, and decoration that moves quickly becomes tiring. The effects in this generator fall into the three useful groups: entrances, attention seekers and loops.
Duration is the setting that most often goes wrong. Interface animations should be short. Between 150 and 300 milliseconds suits small elements such as buttons and tooltips, and 400 to 600 milliseconds suits larger panels that travel further. Anything longer makes an interface feel slow, since the user has to wait for the motion to finish. Looping animations are the exception and run at whatever tempo matches their meaning.
Easing gives motion its character. Objects in the real world accelerate and decelerate, so linear movement looks mechanical. For something appearing, a curve that starts fast and settles slowly reads as responsive. For something leaving, the reverse works. Reserve bouncy overshoot curves for moments that deserve emphasis, as they draw the eye strongly.
Respecting the reduced-motion preference is part of doing this well. A meaningful share of people experience dizziness or nausea from sliding, zooming and parallax effects, and operating systems give them a switch for it. One media query honours that choice, and the generator includes it by default.