CSS Animation Generator Online – Keyframes Made Easy

How to use the CSS Animation Generator

Choose an Animation such as Fade in, Slide in, Zoom in, Bounce, Pulse, Shake, Swing or Spin; the live preview plays it immediately.

Set Duration, Delay and a Timing function; pick Custom cubic-bezier to type your own curve into Custom timing.

Leave Loop forever on, or turn it off and set Iterations. Choose a Direction, a Fill mode and a Class name.

Copy the @keyframes and class with Copy or Download on the CSS tab, or use Copy CSS + HTML and Download HTML demo for a working page.

A CSS animation generator for keyframe effects

This CSS animation generator writes the two pieces every keyframe animation needs: an @keyframes block that describes the motion, and a class that applies it with the animation shorthand. Pick an effect, tune its timing and looping, preview it live and copy code that also respects users who prefer reduced motion.

Example output

The default Bounce animation, looping forever, produces:

@keyframes bounce {
  0%, 20%, 53%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-30px); }
  70% { transform: translateY(-15px); }
  90% { transform: translateY(-4px); }
}

.animated {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Add class="animated" to any element to use it. The HTML tab shows that markup, and Download HTML demo saves a standalone page with the animation running.

Reading the animation shorthand

The generated shorthand always lists values in the same order: name, duration, timing function, delay, iteration count, direction and fill mode. The first time value is always the duration and the second the delay, which is why 1s ease 0s is unambiguous.

Options explained

The 19 animations

Entrances: Fade in, Slide in from left, right, up or down, Zoom in, Flip X and Flip Y.
Exits: Fade out and Zoom out.
Attention seekers: Bounce, Pulse, Heartbeat, Shake, Wobble, Swing and Blink.
Loops: Spin and Float.

Swing also adds transform-origin: top center so the element rocks from its top edge like a hanging sign.

Timing, iterations and direction

Duration ranges from 0.1 to 10 seconds and Delay from 0 to 5 seconds.
Timing function offers the five CSS keywords or a custom cubic-bezier(). The custom field starts with cubic-bezier(0.34, 1.56, 0.64, 1), a slight overshoot; design your own in the cubic bezier generator.
Loop forever writes infinite; untick it to choose 1 to 20 Iterations.
Direction: alternate plays forwards then backwards, which suits Float or Pulse loops that should not snap back.

Fill mode

Value	Effect
`none`	Keyframe styles apply only while the animation runs.
`forwards`	The element keeps the last keyframe after finishing.
`backwards`	The first keyframe applies during the delay.
`both` (default)	Both of the above: no flash before a delayed entrance and no jump back after an exit.

For example, a one-time entrance with Fade in, 0.6s and ease-out gives animation: fadeIn 0.6s ease-out 0s 1 normal both;.

Tips and common mistakes

Existing transforms are replaced. Most presets animate transform. If your element already uses one, for example translate(-50%, -50%) for centering, the animation overrides it while running. Animate an inner wrapper instead.
Slide-ins can cause scrollbars. translateX(100%) moves the element by its own width, possibly past the viewport edge. Put overflow: hidden (or overflow-x: clip) on the container.
Prefer transform and opacity. Every preset uses only these two properties, which browsers can animate without recalculating layout. Animating top, width or margin is heavier.
Class names are sanitized. Spaces and other invalid characters become hyphens, and a leading digit gets an underscore, so the selector is always valid.
Start on scroll. To play an entrance when an element comes into view, add the class from an IntersectionObserver callback.

For static positioning and rotation values, the CSS transform generator helps, and for looping spinners the CSS loader generator has ready-made designs.

Privacy

The keyframes, preview and demo page are generated in your browser. Nothing is uploaded.

Frequently asked questions

How do I play the animation only once?

Untick Loop forever and leave Iterations at 1. With the default fill mode both, the element keeps its final state after the animation ends instead of jumping back.

How can I restart a CSS animation with JavaScript?

Remove the class, force a reflow by reading a layout property such as element.offsetWidth, then add the class again. Without the reflow, the browser merges the removal and re-adding and the animation does not restart.

Can I apply two animations to one element?

Yes. Separate them with commas in the animation property, for example animation: fadeIn 0.5s both, float 3s ease-in-out infinite. If both animate transform, the later one wins for that property, so combine such movements in one @keyframes or use nested elements.

What happens for users who prefer reduced motion?

The generated media query sets animation: none when the operating system requests reduced motion. The element then simply shows its normal styles, so entrance effects appear instantly instead of moving.

Why does my element flash before a delayed fade-in?

With fill mode none or forwards, the first keyframe is not applied during the delay, so the element is briefly fully visible. Use backwards or both to hold the starting keyframe until the animation begins.

CSS Animation Generator