CSS animations

Learn how to create smooth, performant animations using pure CSS with keyframes, timing functions, and animation properties

CSS animations provide a declarative way to create smooth, performant animations without JavaScript. They’re ideal for simple transitions and looping animations.

Keyframe definitions

Keyframes define the states of your animation at specific points in time. Here are real examples from the Animation Playground:

Fade in

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Animation properties

Duration

Controls how long one animation cycle takes to complete:

.element {
  animation-duration: 1s;     /* 1 second */
  animation-duration: 2s;     /* 2 seconds */
  animation-duration: 500ms;  /* 500 milliseconds */
}

Timing function

Controls the acceleration curve of the animation:

Linear

.element {
  animation-timing-function: linear;
  /* Constant speed throughout */
}

Iteration count

Defines how many times the animation repeats:

.element {
  animation-iteration-count: 1;        /* Plays once */
  animation-iteration-count: 3;        /* Plays 3 times */
  animation-iteration-count: infinite; /* Loops forever */
}

Direction

Controls whether the animation plays forward, backward, or alternates:

Normal

.element {
  animation-direction: normal;
  /* Always plays forward */
}

Complete examples

Here’s how to combine all properties together:

Shorthand

.element {
  animation: fade-in 1s ease infinite alternate;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Animation control

You can pause and resume animations with JavaScript:

const getAnimationStyle = () => {
  return {
    animationName: 'fade-in',
    animationDuration: '1s',
    animationTimingFunction: 'ease',
    animationIterationCount: 'infinite',
    animationDirection: 'alternate',
    animationPlayState: isPaused ? 'paused' : 'running'
  }
}

Best practices

• Use transform and opacity for the best performance
• Avoid animating width, height, or margin as they trigger layout recalculation
• Keep animations under 300ms for UI feedback
• Use will-change sparingly to hint at upcoming animations
• Test on lower-end devices to ensure smooth playback

When to use CSS animations

CSS animations are ideal for:

• Simple looping animations
• Hover and focus states
• Loading spinners and indicators
• Entrance and exit animations
• Animations that don’t require dynamic values

For more complex scenarios involving user interaction or dynamic calculations, consider JavaScript animations instead.