What animation presets are available?

17 presets: Bounce, Fade In/Out, Slide In (4 directions), Spin, Pulse, Shake, Flip, Swing, Rubber Band, Jello, Heart Beat, Zoom In/Out.

Can I create custom animations?

Yes! Add keyframes at any percentage, customize transform, opacity, background, border-radius, shadow, and filter properties for each keyframe.

Does the preview use real CSS?

Yes! The live preview uses actual CSS @keyframes injected via a style tag, not a JavaScript animation library. What you see is exactly what the CSS will produce.

What is the cubic-bezier editor?

A visual curve editor where you drag two control points to define a custom timing function. The curve updates in real-time.

CSS Animation Generator

Visual CSS animation builder with 17 presets, keyframe editor, cubic-bezier curve editor, and live preview.

CSS Animation Generator

Build keyframe animations visually, preview in real-time, and export production-ready CSS.

Animation Presets

Animation Name

Duration1s

Timing Function

Delay0s

Iteration CountInfinite

Direction

Fill Mode

Live Preview

Keyframe Timeline

0%25%50%75%100%

%tY:-30

%s:1,0.9

%tY:-15

%s:1,0.95

Generated CSS

@keyframes bounce {
  0% {

  }
  20% {
    transform: translateY(-30px);
  }
  40% {
    transform: scale(1, 0.9);
  }
  60% {
    transform: translateY(-15px);
  }
  80% {
    transform: scale(1, 0.95);
  }
  100% {

  }
}

.animated-element {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}

Shorthand

animation: bounce 1s ease 0s infinite normal both;

Everything runs locally in your browser. No data is sent to any server.