CSS Animation Generator
Design CSS @keyframes animations visually — pick a preset, tune duration, easing, delay, and direction, then copy the CSS.
CSS Animation Generator builds @keyframes animations visually — ten ready-made presets (fade, slide, zoom, bounce, spin, pulse, shake), plus duration, delay, timing-function, iteration-count, direction, and fill-mode controls, with a live preview and one-click copy of the generated CSS. Runs entirely in your browser — no upload, no signup, no account. Made by FreeToolHub.
Presets
Timing
Behavior
Preview
CSS Output
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.element {
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}Build CSS animations for entrances, loaders, and micro-interactions — pick a preset, tune the timing, then copy the @keyframes and animation CSS.
Frequently Asked Questions
What is a CSS animation and how is it different from a transition?
A CSS animation uses @keyframes to define multiple steps (0%, 50%, 100%, etc.) that play automatically, repeat, and reverse without needing a trigger. A transition only animates between two states (e.g. on hover) and runs once per state change.
What do animation-duration, animation-delay, and animation-iteration-count control?
animation-duration sets how long one cycle takes. animation-delay sets how long to wait before it starts. animation-iteration-count sets how many times it repeats — a number, or infinite to loop forever.
What does animation-fill-mode do?
animation-fill-mode controls what styles apply outside the animation's active time. forwards keeps the last keyframe's styles after it ends, backwards applies the first keyframe's styles during any delay, both does both, and none reverts to the element's normal styles.
What's the difference between normal, reverse, alternate, and alternate-reverse for animation-direction?
normal plays 0% to 100% each cycle. reverse plays 100% to 0%. alternate plays forward then backward on alternating cycles. alternate-reverse starts backward then alternates to forward.
Can I copy the generated CSS?
Yes. Click Copy CSS to copy the complete @keyframes block plus the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode declarations, ready to paste into your stylesheet.
Does this tool store my settings or cost anything?
No. Everything runs locally in your browser; nothing is saved, uploaded, or sent to a server. The CSS Animation Generator is completely free with no sign-up, no account, and no limits.