CSS Animation Generator
Pick a preset like fade, slide, bounce, spin or pulse, set duration, timing, iteration and direction, and watch it loop. Copy the full @keyframes and animation CSS.
This CSS animation generator turns a preset motion into a complete @keyframes block plus the animation shorthand that runs it. Choose fade, slide, bounce, spin or pulse, then set the duration, timing function, iteration count and direction and watch the sample element loop with your settings. As a keyframes maker it writes the full rule for you, so you are not counting percentages by hand. Copy the animation css generator output — both the @keyframes and the animation line — and paste it into your stylesheet.
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
.element {
animation: bounce 1s ease infinite normal;
}How it works
- 1
Pick a preset
Choose the motion you want: fade, slide, bounce, spin or pulse. The preview starts looping right away.
- 2
Tune the timing
Set duration, timing function, iteration count and direction. This css @keyframes tool rewrites the rule as you change them.
- 3
Copy the full CSS
Copy both the @keyframes block and the animation shorthand, then paste them in and point the animation at your element.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- What is the difference between @keyframes and the animation property?
- The @keyframes block defines what changes and when, as a set of percentage stops. The animation property attaches that block to an element and sets timing like duration and iteration count. You need both.
- How do I make the animation run once instead of forever?
- Set the iteration count to 1 instead of infinite. The preview updates so you can watch it play a single time.
- What does animation-direction alternate do?
- alternate runs the animation forward, then backward on the next cycle, so a bounce or pulse reverses smoothly instead of jumping back to the start.
- Can I change the keyframe percentages?
- The presets use sensible stops, like 0/50/100 for bounce. This tool focuses on the presets and timing; for fully custom stops you can edit the copied @keyframes by hand.
- Why does my animation flash back at the end?
- By default an element returns to its unanimated state when the animation ends. Add animation-fill-mode: forwards to hold the final frame.
More tools
More from the Hivly network
Free sister tools on our other sites.
