animation-timeline
Связывает CSS-анимацию с прокруткой вместо времени: анимация продвигается по мере прокрутки страницы или элемента.
Синтаксис
animation-timeline: scroll() | view() | --name;Значения
| Параметр | Тип | Описание |
|---|---|---|
| auto | keyword | По умолчанию: анимация идёт по обычной шкале времени. |
| scroll() | function | Прогресс следует за позицией прокрутки контейнера. |
| view() | function | Прогресс следует за тем, насколько элемент прошёл через видимую область. |
| --name | dashed ident | Именованная шкала, объявленная через `scroll-timeline` или `view-timeline` на другом элементе. |
Примеры
Полоска прогресса чтения вверху прокручиваемого блока:
<style>
.page { height: 160px; overflow-y: auto; border: 1px solid #ccc; }
.bar {
position: sticky; top: 0; height: 6px; background: teal;
transform-origin: left;
animation: grow linear;
animation-timeline: scroll();
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.text { height: 600px; padding: 8px; }
</style>
<div class="page">
<div class="bar"></div>
<div class="text">Scroll this box to fill the bar.</div>
</div>Примечания
Пишите animation-timeline после сокращённого animation — оно сбрасывает значение на auto. Длительность не нужна (укажите auto или пропустите). Поддерживается в Chrome и Edge с 2023 года и в Safari 26; в остальных браузерах элемент просто остаётся в обычном состоянии, поэтому считайте это улучшением, а не основой.
См. также
- scroll() — Создают безымянные шкалы прокрутки для `animation-timeline`: `scroll()` следит за прокручиваемым контейнером, `view()` — за проходом самого элемента через видимую область.
- animation-range — Задаёт, какую часть шкалы прокрутки занимает анимация — например, только пока элемент въезжает на экран.
- animation — Запускает на элементе анимацию из `@keyframes`.
- @keyframes — Описывает шаги анимации, которую затем запускают свойством `animation`.
Вопросы и ответы по теме
В учебнике
- Анимация при прокрутке — Анимации, привязанные к прокрутке, — animation-timeline с функциями scroll() и view(), индикатор чтения, появление блоков при прокрутке, animation-range, поддержка браузерами и запасной вариант.