Loading Techie Utils…

CSS Animation Generator

Build a keyframe animation and watch it run. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.

About CSS Animation Generator

Ten keyframe animations that cover most of what an interface actually needs, each with the timing, delay, repeat, direction and fill mode exposed — and each running in front of you with exactly the CSS shown below. Press the button again to replay it.

What you animate matters more than how. transform and opacity are handled by the compositor and cost almost nothing; animating width, top, margin or anything else that changes the layout forces the browser to recalculate positions on every frame, which is where dropped frames on a phone come from. Every preset here moves with transform for that reason.

The fill mode is the control people reach for last and need first. Without it the element snaps back to its own styles the instant the animation ends, which is why a fade-in so often flickers back to invisible: the keyframes finished and nothing said the last frame should stick. both keeps the first frame during the delay and the last one afterwards, which is almost always what was wanted.

Anything that loops needs a prefers-reduced-motion guard before it ships. For some people continuous motion causes genuine nausea, and the media query takes three lines.

Where it helps

  • The animation runs in the page with the exact CSS shown, so there is nothing to imagine.
  • Every preset animates transform and opacity only, which is what keeps an animation off the layout thread.
  • Exposes fill mode and direction, which are the two properties that explain most "why did it snap back" questions.
  • Takes a custom cubic-bezier, so a curve designed in the easing editor can be dropped straight in.
  • Reports the total running time, including the delay and every repeat.
  • Runs entirely in your browser.

Limits

  • One element, one animation. Staggered or sequenced motion across several elements needs delays applied per element, which is beyond a single declaration.
  • The keyframes are presets. They are ordinary CSS once copied, but the editor here does not let you add or move a keyframe.
  • No prefers-reduced-motion wrapper is generated, and anything looping needs one before it ships.
  • Scroll-driven and view-timeline animations are a different mechanism and are not covered.
  • A preview in an otherwise still page flatters any animation; the same motion repeated across a real interface is usually too much.

Frequently asked questions

Why does my element jump back at the end?

Because the default fill mode is none, so the moment the animation finishes the element returns to its own styles. Set animation-fill-mode: forwards — or both, which also applies the first frame during the delay — or write the end state into the element's own CSS and animate from the other direction.

Should I use a transition or an animation?

A transition when there are two states and something triggers the change — a hover, a class being added. An animation when the motion has to run on its own, repeat, or pass through intermediate states. A transition cannot loop and cannot have keyframes in the middle.

Which properties are cheap to animate?

transform and opacity, which the compositor handles without recalculating layout or repainting. filter is usually fine. Anything that changes geometry — width, height, top, left, margin, padding, font-size — forces layout on every frame and is where jank comes from.

What about people who do not want motion?

Wrap it: @media (prefers-reduced-motion: reduce) { .animated { animation: none } }. The setting is a real accessibility preference, not a nicety — for some people looping or parallax motion causes nausea and disorientation.

Related tools

More Colors & Design tools