Scroll-Triggered Animations in CSS

From the CSS Animations cheat sheet · Advanced Animations · verified Jul 2026

Scroll-Triggered Animations

Trigger animations based on scroll position using modern CSS

css
/* Intersection Observer API (JavaScript) */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* CSS Scroll Snap */
.container {
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: start;
}
💡 animation-timeline for scroll-driven animations
⚡ scroll() and view() functions define pure-CSS scroll timelines
📌 Intersection Observer API for broader support
⚠️ Check browser support for scroll animations

More CSS tasks

Back to the full CSS Animations cheat sheet