6XC

CSS Animation Generator

Pick a keyframe preset — spin, pulse, bounce, shake, fade, slide — tune duration and repeats, copy @keyframes + class.

630 views

CSS Animations

An animation pairs a @keyframes block (what changes) with the animation property (how it plays: duration, timing, iteration count). Unlike transitions they run on their own, without needing hover or a class toggle. This generator ships six ready presets and outputs both the keyframes and a ready-to-use class.

Frequently Asked Questions

Animation or transition — which one?

Transition reacts to a state change (hover, class). Animation runs on its own, can loop infinitely and define many steps — use it for spinners, attention pulses and entrance effects.

How do I respect users who prefer less motion?

Wrap the animation in @media (prefers-reduced-motion: no-preference) { … } or disable it inside the reduce variant — vestibular-sensitive users will thank you.

Similar Tools

CSS Gradient Generator Design linear, radial and conic CSS gradients with live preview and copy the code. Generate CSS Box Shadow Generator Design a box-shadow visually — offsets, blur, spread, color, opacity and inset — with live preview. Generate CSS Border Radius Generator Round each corner individually or all at once, in px or %, with live preview and copyable CSS. Generate CSS Text Shadow Generator Design a text-shadow with offsets, blur, color and opacity — live preview on sample text. Generate