Что такое CSS view-timeline-name и зачем он нужен

Современный CSS выходит за пределы обычных анимаций по времени — теперь можно привязывать анимации к прокрутке страницы и видимости элементов. Одним из инструментов для этого является свойство view-timeline-name.

Это свойство позволяет именовать «timeline» (временную шкалу), основанную на видимости элемента внутри области прокрутки (scroll-port). Затем это имя может быть использовано для управления анимациями с помощью свойства animation-timeline. MDN Web Docs+1

Простыми словами:
➡️ вы говорите браузеру «создай у этого элемента шкалу прогресса, которая зависит от того, как он появляется в окне прокрутки» и даёте ей имя. Потом привязываете анимации к этой шкале. CSS-Tricks

🧠 Как работает view-timeline

Чтобы понять view-timeline-name, важно разобраться с двумя понятиями:

🔹 Subject — элемент, чья видимость отслеживается.
🔹 Scroller — контейнер, который прокручивается и в котором видим subject.

Когда subject входит в видимую часть scroller’а (scroll-port), прогресс такой “view timeline” изменяется от 0 % до 100 %, и это можно использовать для анимации. MDN Web Docs

📜 Синтаксис

/* без имени — таймлайн не создаётся */
view-timeline-name: none;

/* с именем — задаёт название шкалы */
view-timeline-name: --myViewTimeline;

/* можно определить несколько имён */
view-timeline-name: --one, --another;

⬆️ Обратите внимание: имя должно начинаться с двойного дефиса (--), как CSS-пользовательские свойства, чтобы избежать конфликтов с ключевыми словами CSS. CSS-Tricks

🎯 Как использовать на практике

Простой пример

HTML:

<article>
  <section class="anim"></section>
</article>

CSS:

.anim {
  height: 250px;
  background: coral;
  view-timeline-name: --enterAnim;
  animation-timeline: --enterAnim;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

📌 Что здесь происходит:

1. Мы даём subject’у имя шкалы --enterAnim.
2. Потом связываем animation-timeline с тем же именем.
3. Когда элемент прокручивается в область просмотра, его анимация запускается и прогрессирует вместе с видимостью. CSS-Tricks

🧰 Дополнительные инструменты: shorthand и анонимные таймлайны

✨ view-timeline (shorthand)

Это сокращение, которое позволяет задавать одновременно имя и ось прокрутки (x, y, inline, block), а также настройки inset. MDN Web Docs

Например:

.element {
  view-timeline: --imageZoom y;
}

🔹 Эквивалент:

.element {
  view-timeline-name: --imageZoom;
  view-timeline-axis: y;
}

🌀 Анонимные view-timelines

Если не задавать имя, то можно использовать CSS-функцию view() прямо в animation-timeline, чтобы получить анонимный таймлайн. Это работает без view-timeline-name: MDN Web Docs

.element {
  animation-timeline: view(y);
  animation-duration: 1s;
}

⚠️ Совместимость и статус

Важно понимать, что это экспериментальная технология.
Поддержка браузеров может быть ограниченной или частичной, поэтому перед использованием в продакшн-проекте проверьте таблицы совместимости. CSS-Tricks

📌 Когда это полезно

• Когда нужно анимировать элементы по мере прокрутки, без JavaScript.
• Для эфектов появления, масштабирования или перемещения, когда элемент появляется в поле зрения.
• Для создания связанных анимаций, которые запускаются в зависимости от видимости других элементов.

🤔 Преимущества

✅ Анимации ориентированы на видимость, а не на время.
✅ Можно создавать сложные взаимодействия без JS.
✅ Хорошо сочетается с новыми CSS-функциями (view(), animation-timeline). CSS-Tricks

📉 Недостатки / подводные камни

❗ Ограниченная поддержка браузеров.
❗ Не все платформы учитывают animation-timeline / view-timeline на сегодняшний день.
❗ Иногда требуется fallback для старых браузеров.

📦 Итог

CSS view-timeline-name открывает новые возможности для анимаций, привязанных к видимости и прокрутке, а не только времени. Он позволяет:

• именовать прогресс-шкалу на основе видимости,
• связывать её с animation-timeline,
• получать плавные scroll-анимации без JavaScript. CSS-Tricks

Это мощный инструмент для современных интерфейсов — просто не забудьте проверить поддержку браузеров перед использованием в продакшне.