CSS Animation Generator

Build CSS @keyframes animations interactively. Edit keyframe stops and properties, set duration, timing function, delay, and iteration count — then copy the ready CSS.

Keyframes:

Stop position0%

CSS Properties

Animation name

Timing function

Duration1s

Delay0s

Iteration countinfinite

Infinite

Direction

Fill mode

Preview

Generated CSS

@keyframes myAnimation {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.element {
  animation: myAnimation 1s ease 0s infinite normal none;
}

Buy me a coffee

Tips & tricks

Use transform and opacity for the smoothest animations — they skip layout recalculation.
Setting fill-mode: forwards keeps the element in its final keyframe state after the animation ends.
alternate direction plays forward then backward — ideal for looping effects without a jarring jump.
cubic-bezier lets you craft custom easing beyond the built-in presets.
A delay of 0s with multiple animated elements and staggered delays creates sequence effects.

Related Tools

CSS Flexbox Generator

Visual flexbox playground — configure flex-direction, flex-wrap, justify-content, align-items, and per-item properties.

CSS Box Shadow Generator

Build CSS box shadows visually with sliders. Add multiple layers, control blur, spread, color, and opacity.

CSS Gradient Generator

Build beautiful CSS linear and radial gradients visually. Customize colors, stops, and angle — copy the ready CSS.

CSS Gradient Text Generator

Create gradient text effects online. Pick 2–4 colors, choose direction, and copy the ready-to-use CSS background-clip code.

CSS Variables Generator

Build a complete CSS custom properties :root block for colors, spacing, typography, and border radius. Copy instantly.

CSS Grid Generator

Build CSS grid layouts visually. Configure columns, rows, gaps, drag to create spans, and copy the generated CSS.

CSS Border Radius Generator

Visually generate border-radius CSS with independent corner controls and live preview.

CSS Text Shadow Generator

Create layered CSS text-shadow effects with live preview and one-click copy.

CSS Filter Generator

Generate CSS filter effects — blur, brightness, contrast, hue-rotate, saturate, sepia, and more — with a live image preview.

CSS Clip Path Generator

Generate CSS clip-path shapes interactively — polygons, circles, and ellipses — with a live preview. Drag control points.