Skip to content
ToolBoxGeniehome

CSS Animation Generator

Developer Tools · Added

Pick a movement, set the timing, and this writes the @keyframes block and the shorthand that drives it — with a preview running the exact CSS shown, not an approximation of it. Every preset animates transform and opacity only, which are the two properties a browser can animate without redoing layout, and the reduced-motion guard is generated alongside rather than left as an exercise.

Used for both the @keyframes name and the CSS class.

ms
ms

0 means infinite.

A CSS length: 24px, 2rem, 100%.

Generated CSS

Slide up and fade in, over 0.5s.

Preview

Preview element

CSS

@keyframes slide-up {
  0% {
    transform: translateY(24px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-up {
  animation: 0.5s ease-out 1 both slide-up;
}

@media (prefers-reduced-motion: reduce) {
  .slide-up {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}
Shorthand only:animation: 0.5s ease-out 1 both slide-up;

The reduced-motion block shortens the animation to a hundredth of a millisecond rather than removing it, so any code waiting on the animationend event still gets one.

Every preset animates transform and opacity only. Those two are handled by the compositor, so the browser does not redo layout or paint per frame — animating width, top or margin instead looks the same and costs a layout pass on every frame.

Every preset animates transform and opacity only, because those two are composited without a layout or paint pass. The same movement written with top, left or width looks identical and makes the browser redo layout on every frame.

How to use the css animation generator

  1. 1Choose an animation and give it a name — the name is used for both the @keyframes block and the CSS class.
  2. 2Set duration, delay, repeat count and easing. A repeat count of 0 means infinite.
  3. 3Adjust distance or scale where the preset uses them, using any CSS length such as 24px or 2rem.
  4. 4Copy the CSS, or take just the shorthand if you already have the keyframes.

Examples

A card appearing on scroll

Input
Slide up and fade in, 500 ms, ease-out, fill mode both
Result
animation: 0.5s ease-out 1 both slide-up;

Fill mode both holds the first frame before the delay and the last frame after the end, so the card does not flash.

A loading spinner

Input
Spin, 1000 ms, linear, repeat 0
Result
animation: 1s linear infinite spin;

Linear is the right easing for a spinner — anything else makes the rotation visibly stutter each turn.

An invalid-field shake

Input
Shake, 600 ms, distance 8px, one repeat
Result
Five keyframe stops alternating translateX(-8px) and translateX(8px)

Keep it short and small. A long or large shake reads as a broken interface rather than a correction.

About the css animation generator

Reading the shorthand

The animation shorthand takes its values in a defined order but a forgiving grammar: duration, timing function, delay, iteration count, direction, fill mode, play state and name. The one rule that catches people is that the first time value is the duration and the second is the delay, so `animation: 1s 2s fade` waits two seconds and runs for one — swapping them silently changes the meaning.

The name has to be a CSS identifier, which is why this validates it: letters, digits, hyphens and underscores, not starting with a digit. A name that clashes with a keyword in the shorthand — calling an animation `linear`, for instance — is a genuine hazard, since the parser cannot tell which slot the word was meant for.

Easing is most of the character

Two animations with the same keyframes and durations can feel completely different depending on the timing function. Linear is right for anything mechanical and continuous, like a spinner, and wrong for almost everything else, because objects in the physical world do not start and stop instantly. ease-out — fast at first, settling at the end — suits things entering the screen; ease-in suits things leaving it.

The overshoot curve in the list is a cubic-bezier with a control point past 1, which carries the element slightly beyond its resting position and lets it settle back. It gives a springy feel that suits small confirmations, and reads as sloppy on anything large or slow. If you want a curve of your own, the cubic-bezier generator on this site produces the four numbers to paste in.

Restraint is a feature

Animation earns its place when it explains something: where a panel came from, that a list item was added rather than replaced, that a control responded to being pressed. Motion that carries no information costs attention and, on a long page, battery — an infinite animation keeps the compositor busy for as long as the tab is open.

Durations in the 200 to 500 millisecond range cover most interface work. Below about 100 ms the movement is not perceived as movement at all, and above roughly 700 ms the interface starts to feel like it is waiting for the animation rather than the other way round. When in doubt, make it shorter — nobody has ever complained that an interface responded too promptly.

Frequently asked questions

Why do all the presets use transform and opacity?
Because those two are the only common properties a browser can change without redoing work it has already done. Animating width, height, top or margin invalidates layout, so the geometry of the subtree is recalculated on every frame; animating background-color forces a repaint. Transform and opacity are handled by the compositor on a layer that already exists, so the frame is drawn again in a different place or at a different alpha. A slide written with left instead of translateX looks identical and costs a layout pass sixty times a second.
What does the prefers-reduced-motion block do?
It respects an operating-system setting that people turn on for real reasons. Large sliding and zooming movements can trigger nausea and dizziness in people with vestibular disorders, and the same setting is used by people who simply find motion distracting. The generated block cuts the duration to a hundredth of a millisecond rather than removing the animation, because an animation that never runs may never fire its animationend event — and code waiting for that event then hangs forever.
What is the difference between animation and transition?
A transition interpolates between two states and needs something to change it — a hover, a class being added, a property being set in script. An animation runs from its own keyframes as soon as it is applied, can have as many intermediate stops as you like, can repeat, and can alternate direction. If the movement is a response to an interaction and has a clear before and after, a transition is simpler; if it needs to run on its own, repeat, or pass through several positions, it needs keyframes.
Why does my animation snap back when it finishes?
Because the default fill mode is none, which means the element returns to its unanimated styles the moment the animation ends. If the last keyframe is the state you want to keep — an element that has faded in should stay visible — set fill mode to forwards, or to both if you also want the first keyframe applied during the delay. This is the single most common surprise with CSS animations, and it is why the generator defaults to both.
Can I animate an element into view as it is scrolled to?
The CSS here is the animation; triggering it is a separate job. The usual approach is an IntersectionObserver that adds the generated class when the element enters the viewport, which is efficient and needs no scroll handler. Newer scroll-driven animation features in CSS can do it without script at all, but browser support is still uneven, so the observer remains the dependable route. Either way the keyframes below are what runs.

Related tools