css-scroll-animations.md

CSS Scroll Animations

CSS Scroll-Triggered Animations (animation-trigger, timeline-trigger)

• 2025-12-05 — CSS scroll-triggered animations are coming
  • Demo: Scroll-Triggered Animations

CSS Scroll-Driven Animations (animation-timeline, view-timeline, view())

• 2025-07-11 — Scroll-Driven Sticky Heading
• Introducing "Unleash the power of Scroll-Driven Animations"
• 2024-01-14 — Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
• 2024-01-27 — CSS Scroll-triggered Animations with Style Queries
• Silky-smooth, uninterrupted scroll-driven web animations
• Demo: show off Scroll-driven Animations
• Demo: CSS-Only Sticky CTA
• Real World examples
• Spec: scroll-animations-1 examples
• 30 CSS scroll driven animation examples

@keyframes slide-left {
    from { transform: scale(0.7); }
    to   { transform: scale(1); }
}
.scroll-animate-slide-left {
    transform-origin: top right;
    animation: slide-left ease-out both;
    animation-timeline: view(block -64px);
    animation-range: entry 0% entry 50%;
}

Examples

• Scroll-driven Animations Demos
• Photo gallery with Scroll Driven Animation