CSS Animation Generator
12 toolsBuild @keyframes animations visually.
Runs in your browser — your files and text stay on your device
Pick a ready-made CSS @keyframes animation (bounce, pulse, spin, shake or fade-in), set its duration and whether it repeats once or forever, and copy the @keyframes block with the animation property. Edit the copied keyframes and timing by hand for custom motion. Prefer animating transform and opacity, which are cheap for the browser, over properties that trigger layout.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.element {
animation: bounce 1s ease infinite;
}How to use this tool
- 1Pick an animation preset, then adjust duration and repeat count.
- 2Watch the live preview box animate.
- 3Copy the full CSS — both the @keyframes block and the animation property.
Frequently asked questions
Can I combine multiple animations?
Yes — CSS supports comma-separating multiple animation names/values on the same element. Copy two presets' @keyframes blocks and combine the animation property manually.
Is this generated on a server?
No — the preview and CSS are computed entirely in your browser.