I’ve said one and meant another, and I’ve used one when I needed another. Here’s a quick reference covering the high-level similarities and differences between scroll-driven animations, scroll-triggered animations, container query scroll states, and view transitions.

Scroll-Driven Animation

A scroll-driven animation responds directly to scrolling progress. Scroll forwards, the animation moves forward. Scroll backwards, the animation runs backwards. Stop scrolling, the animation stops.

.element {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

Scroll-Triggered Animation

A scroll-triggered animation executes on scroll and runs in its entirety. There’s no direct link with scroll progress here. When an element crosses some defined threshold — called the trigger activation range — the animation runs through completely. For example, when that element enters and exits the scrollport.

Container Query Scroll State

This one is in the working draft of the CSS Conditional Rules Module Level 5 specification. The spec defines it as:

[…] allows querying a container for state that depends on scroll position.

It’s somewhat like a scroll-driven animation, somewhat like a scroll-triggered animation, but it updates styles when a container reaches some sort of scroll condition:

.sticky-nav {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  @container scroll-state(stuck: top) {
    background: orangered;
    border-radius: 0;
    flex-direction: row;
    width: 100%;

    a {
      text-decoration: none;
    }
  }
}

View Transition

This has nothing to do with scroll, and nothing to do with view(). It’s a complete API with interlocking CSS and JavaScript features that handles two scenarios:

Same-document transitions

An element changes from one state to another in response to a user interaction — for example, animating radio button check states where the active state moves from one input to the other. The state changes on the same page it started. Bramus has assembled a collection of beautiful examples from the Chrome team.

Cross-document transitions

Animating from one page to the next. The default behavior is a crossfade from Page A to Page B (and back again), and is really easy to implement. It can get much more complex from there — Sunkanmi recently shared several recipes, including one that wipes out the first page with a circular clip-path revealing the second page.

Summary

TypeWhat it does
Scroll-Driven AnimationsScroll forwards, the animation moves forward. Scroll backwards, the animation runs backwards. Stop scrolling, the animation stops.
Scroll-Triggered AnimationsWhen an element crosses some defined threshold — called the trigger activation range — the animation runs through completely.
Container Query Scroll StateUpdates styles when a container reaches some sort of scroll condition.
View TransitionAPI for same-document transitions (element changes state on the same page) and cross-document transitions (transitioning from one page to the next and back).

These four features overlap in name and concept, but each serves a distinct purpose — knowing which one to reach for saves a lot of debugging time.