Animations

🎨 CSS3+ 🟢 Chapter 35 of 49 📂 Phase 12: Transforms & Animations 📅 2026 Edition

📌 Covered in this chapter: @keyframes · animation-name · duration · timing · delay · iteration-count · direction · fill-mode · play-state · Loading · Entrance · Exit · Reduced Motion

Welcome to Chapter 35: Animations — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1@keyframes & Animation Properties

CSS — Fade In▶ Try in Editor

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fade-in 400ms ease-out;
}

animation-iteration-count: infinite — loading spinners
animation-direction: alternate — back and forth
animation-fill-mode: forwards — end state retain
animation-play-state: paused — pause on hover

2Loading, Entrance & Exit Animations

CSS

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 800ms linear infinite;
}

@keyframes slide-out {
  to { opacity: 0; transform: translateX(-100%); }
}

.toast-exit {
  animation: slide-out 300ms ease-in forwards;
}

Reduced motion: Always respect prefers-reduced-motion: reduce — disable or simplify animations for vestibular disorder users.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026