Нативные скролл-анимации на чистом CSS через Animation Timeline API

Браузеры начали нативно поддерживать привязку анимаций к скроллу — и это радикально упрощает верстку интерактивных спецпроектов. Новый Animation Timeline API заменяет тяжелые JS-библиотеки чистым CSS, привязывая стандартные @keyframes к позиции элемента во вьюпорте, а не к таймеру.

Вся логика строится вокруг свойства animation-timeline: view(). При скролле пользователь буквально прокручивает кадры анимации вперед и назад. Поскольку API расширяет базовый синтаксис CSS, с ним работают привычные функции плавности. Можно накинуть агрессивный cubic-bezier или собрать сложную пружинную анимацию через функцию linear(), не написав ни строчки на JavaScript.

Для контроля за таймингами появилось свойство animation-range. Оно определяет, в какой момент запускать эффект: contain ждет полного появления блока на экране, а entry идеально подходит для классического фейда — анимация отрабатывает ровно в момент пересечения границы вьюпорта. Джош Комо собрал наглядные песочницы, где показал, как эти примитивы собираются в сложные визуальные цепочки без просадок по производительности.