CSS Animation Generator

Build @keyframes animations and copy the CSS, with a live preview.

Animation: Fade inTiming: easeDuration: 1sDelay: 0sIterations: infinite

Presets

Animation style

Timing function

Iterations

Duration (1s)

Delay (0s)

Live preview

CSS Code

@keyframes myAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated {
  animation: myAnimation 1s ease 0s infinite;
}

How CSS @keyframes animations work

A CSS animation has two parts: a @keyframes rule that describes what changes over time, and the animation shorthand that attaches it to an element with a duration, timing function, delay, and iteration count. Pick a preset above to see the keyframes and tweak the timing — the preview updates live, and everything runs in your browser.

More CSS tools: the transition generator, the transform generator, and the loader generator.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Building a keyframe animation visually rather than writing it blind.
Getting duration, easing and iteration values that match a spec.
Producing a loading or attention animation with a preview.
Comparing two easing choices on the same keyframes.
Producing a starting animation you then refine.

Frequently Asked Questions

What is the difference between a transition and an animation?: A transition needs a state change to react to and runs once from A to B. A keyframe animation runs on its own with no trigger, can define intermediate steps, and can repeat indefinitely. Anything that loops, or that must play on load, has to be an animation.
What do the percentages in keyframes mean?: Points along the animation's duration, not along its distance. `50%` is halfway through the time regardless of how much movement happens there — which is how a bounce is built: the same position at 0% and 100% with a displacement at 50%.
Which properties are cheap to animate?: `transform` and `opacity`, because the compositor can handle them without recalculating layout or repainting. Animating `width`, `top` or `margin` forces layout on every frame, which is what makes an animation stutter on a mid-range phone while looking fine on a desktop.
What does animation-fill-mode change?: What the element looks like outside the animation's run. Without `forwards`, an element animating from opacity 0 to 1 snaps back to 0 when it ends — the animation stops applying and the original rule takes over again. `both` also applies the start state during any delay.
Should animations respect a motion preference?: Yes. `@media (prefers-reduced-motion: reduce)` is a system setting people enable because motion causes them genuine nausea or vestibular symptoms. Reducing to a fade, or removing the animation entirely, is a small block of CSS and the difference between usable and not.

Common errors and gotchas

Animating a layout property rather than transform and opacity, which costs far more performance.
Omitting a reduced-motion media query, which is an accessibility requirement rather than a nicety.
Looping an attention animation indefinitely, which becomes a distraction and can trigger discomfort.
Forgetting `animation-fill-mode`, so the element snaps back at the end.
Setting a duration long enough that the interface feels unresponsive.