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.

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

Frequently Asked Questions

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