Free CSS tool
CSS Keyframes Animation Generator
This CSS keyframes animation generator builds a ready-to-paste @keyframes rule and animation property from a preset such as fade in, slide up or shake. Set duration, delay, easing and repeat, preview it live, and copy the CSS with a reduced-motion fallback included.
Updated
@keyframes slide-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
animation: slide-up 500ms cubic-bezier(0.22, 1, 0.36, 1) 0ms 1 normal both;
}
@media (prefers-reduced-motion: reduce) {
.animate-slide-up {
animation: none;
}
}How to use the CSS Keyframes Animation Generator
- 1
Choose a preset
Pick fade in, slide up, pop in, shake, pulse, spin or bounce.
- 2
Set the timing
Adjust duration, delay, easing, repeat count, direction and fill mode.
- 3
Replay the preview
Press Replay to see the animation run with your settings.
- 4
Copy the CSS
Copy the code. It includes the @keyframes rule, a class that uses it, and a prefers-reduced-motion block.
Formats and limits
| Presets | Fade in, slide up, pop in, shake, pulse, spin, bounce |
|---|---|
| Settings | Duration, delay, easing, iteration count, direction, fill mode |
| Output | @keyframes rule, an animation shorthand on a class, and a prefers-reduced-motion override |
| Browser support | CSS animations work in every current browser |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| CSS Keyframes Animation Generator (this page) | A small set of common UI entrances and loops, with reduced-motion handled for you | Free, no account, runs in your browser. |
| Animista | Browsing a large library of ready-made CSS animations | An on-demand CSS animations library. Pick an effect, tweak it and copy the code. |
Frequently asked questions
What is a CSS @keyframes animation?
A @keyframes rule names an animation and lists the styles at points along it, such as from and to, or 0%, 50% and 100%. You then attach it to an element with the animation property.
What does animation-fill-mode do?
It decides which styles apply before and after the animation runs. forwards keeps the last frame, backwards applies the first frame during the delay, and both does both.
How do I respect reduced motion?
Wrap an override in @media (prefers-reduced-motion: reduce) and turn the animation off or shorten it. The generated code includes this block.
Should I animate transform or top and left?
Animate transform and opacity. Browsers can usually move them without recalculating layout, so they stay smooth. Animating top, left, width or height forces layout work on every frame.