CSS Animation Generator
Choose from common animation presets, tweak duration, easing, delay and iteration count. Get live preview and copy the CSS keyframe code.
Animation Preset
Settings
About CSS Animation Generator
Create CSS @keyframes animations with a visual builder. Choose from popular animation types like fade, slide, bounce, rotate, and pulse, then customize duration, easing, delay, and iteration. The output includes both the @keyframes block and the animation property.
CSS Animation Properties
Duration — how long one cycle takes · Delay — wait before starting · Easing — acceleration curve · Iteration — how many times to repeat (infinite = forever) · Direction — alternate reverses on every other cycle
Frequently Asked Questions
CSS transitions respond to state changes (like :hover) and animate between two states. CSS animations use @keyframes to define multiple steps and can run automatically, loop, and have complex multi-step sequences without requiring a state change trigger.
Copy the generated CSS and paste it into your stylesheet. The output includes both the @keyframes definition and the animation shorthand property. Add the animation property to any selector you want animated.
With alternate direction, the animation plays forward on odd iterations and backward on even iterations. This creates a smooth back-and-forth effect. It's commonly used for pulse, bounce, and breathing animations.
CSS animations that use only transform and opacity are highly performant because browsers can optimize them on the GPU compositor thread without triggering layout recalculation. Avoid animating width, height, margin, or padding as these cause reflows.