CSS Animation Generator

Build CSS keyframe animations with presets and a live animated preview.

Presets

Animation Properties

Name

Duration

Timing function

Delay

Iteration count

Direction

Fill mode

Preview

CSS Output

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

CSS animations use keyframes to define states at specific points in time. The animation shorthand combines name, duration, timing-function, delay, iteration-count, direction, and fill-mode. fill-mode: forwards keeps the final state after the animation ends, which is useful for entrance animations.

Frequently Asked Questions

: fade-in, slide-in-left, slide-in-right, bounce, pulse, spin, shake, flip, zoom-in, and heartbeat.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visually Box Shadow GeneratorCreate CSS box shadows with a live preview Border Radius GeneratorGenerate CSS border-radius values visually Flexbox GeneratorBuild CSS flexbox layouts with a visual editor CSS Grid GeneratorBuild CSS grid layouts with a visual editor Text Shadow GeneratorGenerate CSS text-shadow effects with live preview Clip-Path GeneratorGenerate CSS clip-path polygon shapes visually CSS Specificity CalculatorCalculate and compare CSS selector specificity