Тип CSS <timeline-range-name>

Тип данных <timeline-range-name> — это перечисляемый идентификатор CSS, представляющий один из предопределённых именованных диапазонов временной шкалы внутри временной шкалы прогресса просмотра.

Ключевые слова <timeline-range-name> используются в селекторах ключевых кадров и следующих свойствах с полной и сокращённой записью:

• animation-range-end
• animation-range-start
• сокращённое свойство animation-range

Синтаксис

Допустимые значения <timeline-range-name>:

cover

Представляет полный диапазон временной шкалы прогресса просмотра: от момента, когда начальный край границы элемента-субъекта впервые входит в диапазон видимости прогресса просмотра области прокрутки (прогресс 0%), до момента, когда конечный край границы полностью покидает его (прогресс 100%). Это диапазон по умолчанию для временных шкал прогресса просмотра.

contain

Представляет диапазон временной шкалы прогресса просмотра, в котором элемент-субъект полностью помещается в диапазон видимости прогресса просмотра в области прокрутки или полностью охватывает его

• Если элемент-субъект меньше области прокрутки, диапазон начинается в момент, когда элемент-субъект впервые полностью помещается в область прокрутки (прогресс 0%), и заканчивается в момент, когда он перестаёт полностью помещаться в область прокрутки (прогресс 100%).
• Если элемент-субъект больше области прокрутки, диапазон начинается в момент, когда элемент-субъект впервые полностью закрывает область прокрутки (прогресс 0%), и заканчивается в момент, когда он перестаёт полностью закрывать область прокрутки (прогресс 100%).

entry

Представляет диапазон временной шкалы прогресса просмотра от момента, когда элемент-субъект впервые начинает входить в область прокрутки, до момента, когда он полностью входит в неё. 0% эквивалентен 0% диапазона cover. 100% эквивалентен 0% диапазона contain.

exit

Представляет диапазон временной шкалы прогресса просмотра от момента, когда элемент-субъект впервые начинает выходить из области прокрутки, до момента, когда он полностью покидает её. 0% эквивалентен 100% диапазона contain. 100% эквивалентен 100% диапазона cover.

entry-crossing

Представляет диапазон, в течение которого основной блок пересекает конечный край границы. Начало диапазона (прогресс 0%) наступает, когда начальный край границы основного блока элемента совпадает с конечным краем диапазона видимости прогресса просмотра. Конец диапазона (100%) — точка, в которой конечный край границы основного блока элемента совпадает с конечным краем диапазона видимости прогресса просмотра. Размер диапазона равен размеру основного блока элемента в направлении прокрутки.

exit-crossing

Представляет диапазон, в котором основной блок пересекает начальный край границы. Начало диапазона (прогресс 0%) наступает, когда начальный край границы основного блока элемента совпадает с начальным краем диапазона видимости прогресса просмотра. Конец диапазона (прогресс 100%) — точка, в которой конечный край границы основного блока элемента совпадает с начальным краем диапазона видимости прогресса просмотра. Размер диапазона равен размеру основного блока элемента в направлении прокрутки.

scroll

Представляет полный диапазон контейнера прокрутки, для которого определена временная шкала прогресса просмотра. Начало (прогресс 0%) и конец (прогресс 100%) диапазона соответствуют самым начальной и конечной позициям контейнера прокрутки, лежащего в основе временной шкалы прогресса просмотра. Это диапазон по умолчанию для временных шкал прогресса прокрутки.

Формальный синтаксис

<timeline-range-name> = cover | contain | entry | exit | entry-crossing | exit-crossing | scroll

Примеры

См. визуализатор диапазонов временной шкалы просмотра.

Спецификации

Совместимость с браузерами

См. также

• animation-range-start, animation-range-end, animation-range
• animation-timeline
• scroll-timeline
• view-timeline-inset
• scroll(), view()
• Разбираемся в именах диапазонов временной шкалы
• Временные шкалы анимации, управляемые прокруткой
• модуль CSS-анимации, управляемые прокруткой
• Визуализатор диапазонов временной шкалы просмотра