CSS Scroll Reveal Animations

How It Works

.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Summary

• animation-timeline: view() triggers the animation based on when the element enters and exits the viewport, similar to IntersectionObserver but with zero JavaScript.
• animation-range: entry 0% entry 100% controls the animation timing — it starts when the element begins entering the viewport and completes when it’s fully visible.
• This pattern replaces libraries like AOS.js (14KB+), GSAP ScrollTrigger, or custom IntersectionObserver setups.
• The animation runs on the compositor thread, making it performant with no layout thrashing or jank.
• Supported in Chrome 115+ (Jul 2023), Edge 115+, and Safari 18+ (Sep 2024). Firefox: behind flag.