Open menu

CSS Animation Generator

Create CSS animations on a visual keyframe timeline, or start from more than 140 ready-made entrances, exits, attention seekers, loops, text effects, loaders and scroll-driven reveals. Set duration, delay, repeats, easing (including spring curves and steps), then copy clean @keyframes code with a reduced-motion fallback built in.

Preset gallery
Card titleSupporting text for the card.

Accessibility checks

  • Pass A prefers-reduced-motion block turns the animation off for people who ask for less motion.
  • Pass No risky flashing (0 flashes per second).
  • Pass Runs for 0.7s or starts on interaction — no pause control needed.
  • Pass Animates only transform and opacity, which the GPU composites smoothly.

Export code

@keyframes fade-in-up {
  0% {
    transform: translate(0px, 24px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

.animate-fade-in-up {
  transform-origin: center;
  animation: fade-in-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 0ms 1 normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up {
    animation: none;
  }
}
Favourites on this device (0)

No favourites yet.

Animation & subject
Trigger
Accent color
Keyframes
Timeline

Editing the keyframe at 0%. Properties you never change are left out of the CSS.

Timing

How to use the CSS animation generator

  1. Pick a starting point from the preset gallery. Filter by entrances, exits, attention seekers, loops, text, loaders, hover or scroll-driven, then select Customize.
  2. Choose a preview subject (box, text, button, icon, card or image placeholder) and a trigger: on load, on hover, or on scroll.
  3. Edit the keyframes. Select a marker on the timeline to edit that moment. Drag markers to retime them, or focus one and use the arrow keys (Shift moves 10%). Add up to 12 keyframes.
  4. Set the timing: duration, delay, repeat count or loop forever, direction, fill mode and easing. Choose Custom curve to shape a cubic-bezier, Steps for frame-by-frame motion, or a spring.
  5. Use the playback bar to pause, restart, scrub to any point or watch at 0.25× to fine-tune details.
  6. Review the checks, then copy or download CSS, CSS variables, SCSS, a Tailwind config, React or HTML.

How it works: anatomy of a CSS animation

An animation has two parts. The @keyframes rule describes what changes at each point of the timeline, from 0% to 100%. The animation property attaches it to an element and says how long it lasts and how it moves:

animation: name duration timing-function delay iteration-count direction fill-mode;
  • Duration and delay are in milliseconds. 200–500 ms suits interface feedback; 600–1,000 ms suits entrances.
  • Timing function shapes the speed. Ease-out starts fast and settles gently, which feels natural for things arriving. Back-out overshoots slightly. Springs bounce.
  • Iteration count is how many times it plays (infinite loops).
  • Direction can reverse the timeline or alternate it back and forth.
  • Fill mode decides whether the first frame applies during the delay (backwards) and whether the last frame stays afterwards (forwards). both does both, which is what most entrances need.

The studio only writes the properties you actually animate, and writes them in every keyframe so browsers interpolate them correctly. Keyframes with identical styles are merged, for example 0%, 20%, 53%, 80%, 100% in the bounce animation.

Browser support and performance

Keyframe animations work in every current browser. Scroll-driven timelines (animation-timeline: view()) are supported in Chromium-based browsers and newer versions of Safari, and the export keeps them inside @supports, so other browsers show the element without animation. linear() springs fall back to a cubic-bezier curve.

For smooth motion, stick to transform and opacity. Avoid animating width, height, top or margin, which force layout recalculation on every frame.

Worked examples

Example 1: a card that fades in from below

Load fade-in-up-md with the card subject. It moves the card up 24px while fading in over 700ms with an expo-out curve. Add a 100ms delay to the second card and 200ms to the third for a staggered entrance.

Example 2: a typewriter heading

Load typewriter. It reveals the text from the left using clip-path and steps(14, end), so it appears in jumps like a typewriter. Match the step count to the number of characters for the most convincing effect.

Example 3: a reveal on scroll

Load scroll-fade-up. On your page it starts when the element enters the viewport and finishes when it is fully in view. Switch the range to While crossing the viewport for a slower, parallax-like progression.

Tips and common mistakes

  • Too much motion. Animate the one thing you want people to notice, not everything on the page.
  • Long loops that can’t be paused. Infinite animations next to text are distracting. Keep loops subtle, or provide a pause button for anything longer than five seconds.
  • Forgetting the end state. Without forwards or both, an entrance jumps back to its original style when it finishes.
  • Animating layout properties. Use transform: translate() instead of left/top, and scale() instead of width/height.

Frequently asked questions

What does prefers-reduced-motion do in the exported code?

Some people get dizzy or distracted by motion and turn on a "reduce motion" setting in their operating system. Every export includes a media query that turns the animation off for them, so the content simply appears in its final state.

What are scroll-driven animations?

With animation-timeline set to view(), an animation progresses as the element scrolls through the viewport instead of over time. The export wraps it in @supports, so browsers without scroll timelines show the element normally, unanimated.

Which properties are best to animate?

transform (move, scale, rotate) and opacity. Browsers can composite them on the GPU without recalculating layout. Blur, glow, clip-path and colors are fine for small elements, and the performance check tells you when you use them.

How do spring easings work in CSS?

The spring options sample a damped spring into the linear() easing function, which current browsers support. The export first sets a cubic-bezier fallback, so older browsers still get a smooth overshoot.

Why does the flashing check matter?

WCAG 2.3.1 limits content to three flashes per second, because faster flashing can trigger seizures. The studio estimates the flash rate from large opacity changes and warns you before you reach the limit.

Can I use the animations with Tailwind?

Yes. The Tailwind tab gives you a tailwind.config.js extension for v3 and an @theme block for v4, plus a usage example with motion-reduce:animate-none.

Do I need JavaScript?

No. Load, hover and scroll-driven animations are all pure CSS. You only need JavaScript if you want to start an animation from a custom event, for example by adding a class.

Sources