CSS Animation Generator
Build CSS keyframe animations visually — pick a preset, tune the timing, preview it live and copy the CSS.
Generated CSS
How it works
Pick an animation preset — fade, slide, zoom, bounce, pulse, shake, spin and more — then
tune the duration, delay, easing, iteration count, direction and fill mode. The box above
replays the animation every time you change a setting, so you can feel the timing before
you ship it. The generated CSS is a plain @keyframes rule plus a class you can
paste straight into your stylesheet; no framework, no build step and no runtime library.
Choose Custom… under Timing to paste your own
cubic-bezier() or steps() value — it is validated with
CSS.supports() before it reaches the preview. Everything runs in your browser
with vanilla JavaScript: nothing is uploaded, and there are no ads or trackers.
Frequently asked questions
How do I create a CSS animation without writing code?
Choose a preset such as fade in, slide in left, zoom or bounce, then adjust duration, delay, easing, iteration count, direction and fill mode with the controls. The preview box replays the animation on every change, and the Generated CSS panel shows a ready-to-paste @keyframes rule plus a class. Copy it or download animation.css and add the class to your element — no build step or JavaScript library required.
What is the difference between a CSS animation and a CSS transition?
A transition animates a property only when its value changes, from one state to another, and it needs a trigger like :hover or a class toggle. A CSS animation uses @keyframes, so it can define many intermediate steps, start on its own as soon as the element renders, repeat a set number of times or loop forever, and play in reverse or alternate. Use a transition for simple hover effects and an animation for anything multi-step or looping.
How do I loop a CSS animation forever?
Tick "Loop forever" and the generator sets animation-iteration-count to infinite in the output — for example animation: pulse 1s ease 0s infinite normal both. Combine it with the alternate direction so the animation plays back and forth instead of jumping to the start. For looping attention-seekers, keep the duration short and respect prefers-reduced-motion in your own stylesheet.