Разница между scroll-timeline и view-timeline в CSS-анимациях заключается в том, как они определяют прогресс анимации. 24

Scroll-timeline работает на основе положения прокрутки элемента, который можно прокрутить. 2 Прогресс анимации меняется только при изменении положения прокрутки контейнера. 2 Положение прокрутки указывается в процентах: начальное положение представлено как 0%, конечное — как 100%. 2

View-timeline связан с положением прокрутки контейнера, но в отношении прогресса элемента внутри контейнера. 2 Прогресс анимации начинается в момент, когда элемент впервые пересекается с контейнером прокрутки, и заканчивается, когда элемент больше не пересекается с контейнером. 2 По умолчанию таймлайн находится на 0%, когда элемент впервые становится видимым на одном краю контейнера прокрутки, и на 100%, когда он достигает противоположного края. 3

Таким образом, scroll-timeline ориентирован на общую прокрутку контейнера, а view-timeline — на прогресс конкретного элемента внутри контейнера прокрутки.