CSS Animation Generator

Create CSS keyframe animations with customizable timing, duration, and effects.

Animation Settings

Animation Name

Duration: 1s

Timing Function

Delay: 0s

Iteration Count

Direction

Fill Mode

Preset Animations

Live Preview

Generated CSS

Keyframes

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Animation Property

animation: fadeIn 1s ease 0s 1 normal none;

Complete Example

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

CSS Animation Basics

CSS animations have two parts: the @keyframes rule that defines what happens, and the animation property that applies it to an element.

This generator builds both. Define your animation name, set the timing, and get the complete CSS to copy.

Animation Properties

duration

How long one cycle takes. 0.5s is fast,2s is slow. Most UI animations work well between 0.2s and 0.5s.

timing-function

Controls acceleration. ease starts slow, speeds up, slows down. linear is constant.ease-in-out is smoother.

iteration-count

How many times to repeat. infinite loops forever. Use specific numbers for one-off animations.

direction

normal runs forward,reverse backward,alternate goes back and forth.

fill-mode

What happens before/after animation. forwardskeeps the final state. backwards applies the first keyframe during delay.

delay

Wait time before animation starts. Useful for staggering multiple elements or creating sequences.

Common Questions

Animation vs transition?

Transitions interpolate between two states (hover, focus). Animations run independently and can have multiple keyframes. Use transitions for simple state changes, animations for complex sequences.

How do I stop an animation?

Use animation-play-state: paused to pause, or remove the animation property entirely. For JavaScript control, toggle a class that applies the animation.

Can I animate multiple properties?

Yes, keyframes can change any animatable property. Combine transforms, opacity, colors, shadows - whatever you need.

Performance Tips

Animate transform and opacity

These are GPU-accelerated and don't trigger layout. Avoid animating width, height, top, left - they're expensive.

Keep it subtle

UI animations should enhance, not distract. 200-500ms is usually enough. Save the flashy stuff for marketing pages.

Respect reduced motion

Some users get motion sickness from animations. Use@media (prefers-reduced-motion) to disable or simplify animations for affected users.

Other Free Tools

Search tools

CSS Animation Generator

CSS Animation Basics

Animation Properties

Common Questions

Animation vs transition?

How do I stop an animation?

Can I animate multiple properties?

Performance Tips

Animate transform and opacity

Keep it subtle

Respect reduced motion

Other Free Tools

Cubic Bezier Editor

CSS Transition Previewer

CSS Gradient Generator

CSS Loader Generator

CSS Button Generator

Glassmorphism Generator

Neumorphism Generator

CSS Border Radius Generator

CSS Box Shadow Generator

CSS Text Shadow Generator

CSS Filter Generator

CSS Pattern Generator

CSS Shape Generator

CSS Grid Generator

Flexbox Playground

CSS Clip Path Maker

Letter Spacing & Line Height Visualizer

Fluid Typography Calculator

Fluid Space Calculator

CSS Spacing Scale Generator

CSS calc() Builder

PX to REM Converter

Media Query Builder

Scroll Snap Builder

Viewport Unit Converter

CSS Minifier & Beautifier

CSS Variable Extractor

CSS Specificity Calculator

CSS Counter Generator

Print CSS Helper