Справочник HTML & CSS

animation-range

Задаёт, какую часть шкалы прокрутки занимает анимация — например, только пока элемент въезжает на экран.

Синтаксис

animation-range: start end;

Значения

Параметр	Тип	Описание
normal	keyword	По умолчанию: вся шкала.
entry, exit, cover, contain	range name	Именованные фазы шкалы `view()`: въезд, выезд, весь путь, полностью виден.
%, length	offset	Смещение, отдельно или после имени фазы: `entry 20%`, `200px`.

Примеры

Картинка вырастает с 50% до полного размера, пока въезжает — от первого пикселя до половины:

<style>
  .box { height: 200px; overflow-y: auto; border: 1px solid #ccc; }
  .box p { height: 220px; margin: 0; padding: 8px; }
  img {
    display: block; margin: 0 auto;
    animation: zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  @keyframes zoom { from { scale: 0.5; } }
</style>
 
<div class="box">
  <p>Scroll down.</p>
  <img src="/media/photo-200x200.jpg" alt="A photo" width="200" height="200">
  <p></p>
</div>

Примечания

При одном значении конец берётся из той же фазы: animation-range: entry — то же, что entry 0% entry 100%. Как и animation-timeline, задавайте его после сокращённого animation, которое его сбрасывает.

См. также

animation-timeline — Связывает CSS-анимацию с прокруткой вместо времени: анимация продвигается по мере прокрутки страницы или элемента.
scroll() — Создают безымянные шкалы прокрутки для `animation-timeline`: `scroll()` следит за прокручиваемым контейнером, `view()` — за проходом самого элемента через видимую область.
animation — Запускает на элементе анимацию из `@keyframes`.

В учебнике

Анимация при прокрутке — Анимации, привязанные к прокрутке, — animation-timeline с функциями scroll() и view(), индикатор чтения, появление блоков при прокрутке, animation-range, поддержка браузерами и запасной вариант.

Спасибо, что читаете!