CSS Animation

CSS animation is a way to animate element styles using the @keyframes rule and the animation-* properties. A related feature, CSS transitions, animates a change between two states. Animations can run on load, loop and move through several steps.

Why it matters

Motion guides attention and confirms interaction, and CSS handles it without JavaScript. Performance depends on what you animate. Changing transform and opacity can usually be handled by the browser's compositor on the GPU, staying smooth. Animating width, top or margin forces layout every frame and can cause jank.

Example

@keyframes pulse {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(1.1); opacity: .7; }
}
.badge { animation: pulse 1s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .badge { animation: none; }
}

The badge scales up and down every second. The media query respects users who ask their system to reduce motion.

Common mistakes

• Animating layout properties instead of transform and opacity.
• Ignoring prefers-reduced-motion, which can cause discomfort for some people.
• Long or looping animations that distract from content or drain batteries.
• Animating elements causing layout shift and hurting Core Web Vitals.

Related

• Core Web Vitals
• CSS
• Media query
• Canvas element

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.