CSS Animation Generator

Generate CSS keyframes animations free online with live preview. Choose fade, slide, bounce, or rotate effects, adjust duration and timing, get ready-to-copy CSS.

Animation Type

Timing Function

Duration: 1s

Loop infinitely

Browser only.

How to Use This Tool

Choose an animation typeFade, slide, bounce, rotate, or pulse

Adjust timing and durationPick a speed curve and length

Copy the generated CSSIncludes both keyframes and the animation property

Two Pieces of CSS Working Together

A working CSS animation always requires two parts: an keyframes block defining what actually changes over the animation's course, and an animation property on the target element that references those keyframes with specific timing. This generator produces both pieces together, correctly linked, ready to paste as a complete working unit.

Timing Functions Shape How Motion Feels

The same keyframes can feel completely different depending on the timing function applied -- linear motion feels mechanical and constant, while ease-out (fast start, slow finish) tends to feel more natural since it mimics how real objects decelerate. Trying different timing functions on the identical animation reveals how much this single setting affects perceived quality.

A Performance Detail Worth Knowing

Animations built from transform and opacity changes (which this generator's presets use) can be hardware-accelerated by the browser's compositor, generally performing more smoothly than animations changing properties like width, height, or absolute position, which can trigger more expensive layout recalculation on every frame.

Frequently Asked Questions

@keyframes defines the actual sequence of style changes (the animation's content), while the animation property on an element references that keyframe name and sets timing parameters like duration, easing, and repeat behavior. Both pieces are required together for an animation to actually run.

They control the animation's speed curve over its duration -- linear moves at constant speed throughout, ease-in-out starts and ends slowly with faster movement in the middle, and other curves create different acceleration/deceleration feels that can make motion feel more natural or more mechanical.

Real-world motion rarely moves at constant speed -- objects accelerate and decelerate. Easing functions that mimic this (like ease-out, which decelerates toward the end) often feel more natural than linear motion, which is why most UI animation defaults away from linear timing.

Setting it to 'infinite' creates a continuously looping animation, useful for loading indicators or ambient motion, while a specific number runs the animation that many times and then stops, holding at its final keyframe state.

Animating certain properties (like width, height, or top/left positioning) can trigger expensive layout recalculations, while animating transform and opacity specifically can be hardware-accelerated by the browser, generally performing better -- a detail worth knowing for animation-heavy interfaces.