CSS animation generator.

What each control writes into the CSS

Every setting in the toolbar maps to one part of the animation shorthand. The preview replays after each change. The preview object menu (Box, Circle, Pill, Blob, Button, Card, Text, Badge) only changes what you watch; it does not change the copied code.

• Animation type picks the @keyframes rule: Scale, Rotate, and Slide in nine positions, plus Vibrate, Shake, Pulse, Jello, Fade in, Fade out, Ken Burns, and Background pan.
• Direction sets animation-direction: normal, reverse, alternate, or alternate-reverse.
• Easing sets animation-timing-function. The five CSS keywords (linear, ease, ease-in, ease-out, ease-in-out) are listed first, followed by Penner curves written as cubic-bezier() values. The Back curves use control points below 0 or above 1, so the element overshoots and settles.
• Fill mode sets animation-fill-mode: none, forwards, backwards, or both.
• Duration and Delay offer presets (0, 1, 2, 5, 10 seconds, or 0, 150, 300, 500, 1000 ms) and a number field. The ms switch converts the current value, so 1s becomes 1000ms instead of 1ms.
• The Infinite switch sets the iteration count to infinite; when it is off, the animation runs once.

What you get when you copy

The copy button opens a dialog with three tabs. All contains a comment header, the @keyframes rule, and a class. Keyframes and Class copy each part on its own. The class and the keyframes use the same name, taken from the preset, so the output below is what you get for Slide Top with a 0.5s duration, Ease Out Quad easing, and fill mode both.

In the shorthand, the first time value is always the duration and the second is the delay, so keep that order if you edit the line by hand. If the preset name already exists in your project, rename the @keyframes rule and the name inside the animation value together.

@keyframes slide-top {0% { transform: translateY(0); } 100% { transform: translateY(-100px);} }

.slide-top {
    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 normal both;
}

Playing an animation again

A CSS animation runs when the class is applied and does not restart while the class stays on the element. To replay it, for example to shake a form field after each failed submit, remove the class, force the browser to recalculate styles, and add it back. Reading offsetWidth is the usual way to force that recalculation. In React you can get the same result by changing the element's key, which remounts it; the generator's restart button works this way.

const field = document.querySelector("#email");

function shakeField() {
  field.classList.remove("shake-horizontal");
  void field.offsetWidth; // forces a style recalculation so the animation restarts
  field.classList.add("shake-horizontal");
}

// Optional: remove the class once it has finished
field.addEventListener("animationend", () => {
  field.classList.remove("shake-horizontal");
});

Common mistakes with the copied code

Most problems come from settings that are easy to miss in the preview or from what the copied code leaves out.

• The element jumps back at the end. With fill mode none, the element returns to its own styles when the animation finishes. Use forwards to keep the last keyframe.
• An entrance with a delay flashes before it starts. During the delay the element shows its normal styles, for example fully visible before a fade-in. Use backwards or both to apply the first keyframe during the delay.
• Alternate does nothing. Alternate only differs from normal on the second iteration, so with a single run it looks the same. Turn on Infinite, or change the 1 in the copied shorthand to 2.
• Background pan does not move. Those keyframes animate background-position, which only has a visible effect when the background is larger than the element. The preview adds background-size: 200% 200%; the copied class does not, so add it yourself together with a gradient background.
• 3D presets look flat. Presets with fwd or bck in the name use translateZ, and flip and swing presets use rotateX or rotateY. Without perspective on the parent (for example perspective: 800px), translateZ has no visible effect and flips look like a squash.
• An exit animation leaves an invisible element behind. A fade-out with forwards hides the element visually, but it still takes up space and can receive clicks. Set display: none or the hidden attribute in an animationend listener.

Reduced motion

The generator does not autoplay the preview on first load when your system asks for reduced motion, and the cards in the collection stay still until you press their restart button. The copied CSS has no reduced-motion rule, so add one in your project. Removing the animation is the simplest option, but check the end state: for a fade-in the element is simply visible, while an element that is meant to end hidden after a fade-out needs that final state set directly.

Looping attention animations such as Vibrate, Heartbeat, Pulsate, and Ping deserve the most care. WCAG 2.2.2 (Pause, Stop, Hide) requires a way to pause moving content that starts automatically, lasts more than five seconds, and is shown next to other content. A badge that pulses forever meets that description, so limit it to a few iterations or stop it after the user has seen it.

@media (prefers-reduced-motion: reduce) {
  .slide-top,
  .heartbeat {
    animation: none;
  }
}

Performance

Most presets animate only transform and opacity. Browsers can usually run these without recalculating layout or repainting, so they stay smooth even on slower phones. A few groups animate properties that cost more: Background pan changes background-position and the Shadow Drop groups change box-shadow, both of which repaint the element on every frame, and the text tracking presets animate letter-spacing, which recalculates layout. Use those on small elements and avoid running many of them at once. Adding will-change to every animated element does not make things faster; it reserves memory for each layer, so save it for an element you have measured.

Questions

How do I use the copied animation?

Paste the CSS into your stylesheet and add the class to an element, for example <div class="slide-top">. The animation runs when the class is applied. To play it again, remove the class and add it back, forcing a style recalculation in between as shown above.

How do I stop a CSS animation from looping?

Turn off the Infinite switch before copying, or replace infinite in the shorthand with a number such as 1 or 3. To stop an animation that is already running, set animation-play-state: paused (it freezes in place) or remove the class (it returns to its normal styles).

How do I keep an element in its final position after the animation?

Set fill mode to forwards or both. With none, the element snaps back to its own styles when the last iteration ends.

Can I use these animations with Tailwind CSS?

Yes. Paste the @keyframes rule into your main CSS file. In Tailwind CSS v4 you can add the animation to the theme as --animate-slide-top: slide-top 0.5s ease both; inside @theme, which creates an animate-slide-top utility. Without that, an arbitrary value such as animate-[slide-top_0.5s_ease_both] also works.