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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.