В чем разница между scroll и view-timeline в CSS-анимациях?

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

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

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

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