animation-range

{{SeeCompatTable}}

Властивість-скорочення CSS animation-range (діапазон анімації) використовується для задання початку та кінця діапазону прикріплення анімації протягом її часової шкали, тобто де на часовій шкалі почнеться та закінчиться анімація.

Властивості-складові

Ця властивість є скороченням наступних властивостей CSS:

Синтаксис

/* одне ключове слово або відсоткове значення довжини */
animation-range: normal; /* Рівносильно normal normal */
animation-range: 20%; /* Рівносильно 20% normal */
animation-range: 100px; /* Рівносильно 100px normal */

/* одне іменоване значення діапазону часової шкали */
animation-range: cover; /* Рівносильно cover 0% cover 100% */
animation-range: contain; /* Рівносильно contain 0% contain 100% */
animation-range: cover 20%; /* Рівносильно cover 20% cover 100% */
animation-range: contain 100px; /* Рівносильно contain 100px cover 100% */

/* два значення – для початку та кінця діапазону */
animation-range: normal 25%;
animation-range: 25% normal;
animation-range: 25% 50%;
animation-range: entry exit; /* Рівносильно entry 0% exit 100% */
animation-range: cover cover 200px; /* Рівносильно cover 0% cover 200px */
animation-range: entry 10% exit; /* Рівносильно entry 10% exit 100% */
animation-range: 10% exit 90%;
animation-range: entry 10% 90%;

Властивість-скорочення animation-range може бути застосована до контейнерного елемента як комбінація значень <animation-range-start> та <animation-range-end>. Якщо обидва значення задані, вони будуть розтлумачені в порядку: спершу <animation-range-start>, потім <animation-range-end>.

Як показано коментарями в блоку синтаксису вище, якщо задано лише одне значення, то є кілька можливих тлумачень:

  • Якщо значення – це length-percentage або normal, то <animation-range-start> прийме це значення, а <animation-range-end> буде рівним normal.
  • Якщо значення – це іменований діапазон часової шкали, після якого немає <length-percentage>, то діапазон буде між цим іменованим діапазоном часової шкали на 0% і 100%.
  • Якщо значення – це <length-percentage>, після якого стоїть <length-percentage>, то діапазон почнеться на цих іменованому діапазоні часової шкали та відсотку, а кінець стоятиме на цьому іменованому діапазоні та 100%.

Значення

Одне або два значення, що представляють animation-range-start чи animation-range-end. Ці значення можуть бути чимось з наступного:

normal

Представляє початок часової шкали у випадку animation-range-start та кінець часової шкали у випадку animation-range-end. Це усталене значення.

<length-percentage>

Значення довжини або відсотків, виміряне від початку часової шкали.

<timeline-range-name>

Специфічний іменований діапазон часової шкали всередині загальної часової шкали. Можливі значення:

cover

Представляє повний діапазон іменованої часової шкали прогресу перегляду (детальніше в Прокрутних анімаціях CSS), від точки, де елемент-суб'єкт починає входити в діапазон видимості прогресу перегляду області прокрутки (0% прогресу) до точки, де він повністю його залишив (100% прогресу).

contain

Представляє діапазон іменованої часової шкали прогресу перегляду, де елемент-суб'єкт повністю міститься в діапазоні видимості прогресу перегляду області прокрутки, або повністю вміщає його.

  • Якщо елемент-суб'єкт – менший за область прокрутки, то діапазон буде від точки, де елемент-суб'єкт уперше повністю вмістився в області прокрутки (0% прогресу), до точки, де він більше не повністю вміщається в області прокрутки (100% прогресу).
  • Якщо елемент-суб'єкт – більший за область прокрутки, то діапазон буде від точки, де елемент-суб'єкт уперше повністю накрив область прокрутки (0% прогресу), до точки, де він більше не повністю накриває область прокрутки (100% прогресу).
entry

Представляє діапазон іменованої часової шкали прогресу перегляду від точки, де елемент-суб'єкт уперше починає входити в область прокрутки (0% прогресу), до точки, де він повністю ввійшов у область прокрутки (100%).

exit

Представляє діапазон іменованої часової шкали прогресу перегляду від точки, де елемент-суб'єкт уперше починає виходити з області прокрутки (0% прогресу), до точки, де він повністю вийшов з області прокрутки (100%).

entry-crossing

Представляє діапазон іменованої часової шкали прогресу перегляду від точки, де елемент-суб'єкт уперше починає перетинати початковий край області прокрутки (0% прогресу), до точки, де він повністю перетнув початковий край області прокрутки (100%).

exit-crossing

Представляє діапазон іменованої часової шкали прогресу перегляду від точки, де елемент-суб'єкт уперше починає перетинати край області прокрутки (0% прогресу), до точки, де він повністю перетнув край області прокрутки (100%).

У випадку значень <timeline-range-name>, що не включають <length-percentage>, усталений відсоток – 0% для значення animation-range-start і 100% для значення animation-range-end.

Примітка: Доволі важко уявити, що ці значення означають, на основі описів вище. На щастя, Візуалізатор діапазонів часової шкали перегляду точно демонструє, що вони означають, у простому візуальному форматі.

<timeline-range-name> <length-percentage>

Значення-комбінація, що дорівнює заданим відсоткам або відстані на заданому іменованому діапазоні часової шкали, виміряним від початку цього діапазону часової шкали.

Примітка: Частина області прокрутки (деталі в Контейнері прокрутки), відома як діапазон видимості прогресу перегляду, – це область, у межах якої елемент-суб'єкт анімації іменованої часової шкали прогресу перегляду вважається видимим. Усталено це повний діапазон області прокрутки, але її можна налаштувати за допомогою властивості view-timeline-inset.

Формальне визначення

Значення не знайшлося в базі даних!

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

Інформація про синтаксис недоступна

Жодного значення не знайшлося в базі даних.

Приклади

Візуалізатор діапазонів часової шкали перегляду

Візуалізатор діапазонів часової шкали перегляду містить гарне та легке для розуміння пояснення того, що означають всі типи значень.

Створення іменованої часової шкали прогресу перегляду з діапазоном

Часова шкала прогресу перегляду з іменем --subjectReveal визначається за допомогою властивості view-timeline на елементі-суб'єкті з class зі значенням animation.

Потім це задається як часова шкала для того ж елемента за допомогою animation-timeline: --subjectReveal;. Результатом є те, що елемент-суб'єкт анімується, коли він рухається вгору по документу під час прокрутки.

Також задано оголошення animation-range, щоб анімація почалася пізніше, ніж очікувалося, і закінчилася раніше.

HTML

HTML для прикладу – показаний нижче.

<div class="content">
  <h1>Вміст</h1>

  <p>
    Наша мета проста: це надання вам глобального громадянства, інновацій та
    продуктів харчування. Завдяки довершеним та надійним продуктам та послугам,
    кваліфікованим працівникам і відповідальному підходу до новаторства та
    відкриттів, а також співпраці з рейтинговими агентствами та гуртовими
    постачальниками, організація відкриває перед Україною нові оригінальні
    перспективи.
  </p>

  <p>
    Ми впевнені, що впровадження бізнесу (розробка нових торгових марок) життєво
    необхідне для розвитку, тому ми постійно працюємо над поліпшенням та разом з
    тим, відкриті до безпрограшних домовленостей. У своїй діяльності товариство
    використовує фінансово відповідальні універсальні технології неперервної
    інтеграції, зберігання даних та накопичення.
  </p>

  <div class="subject animation"></div>

  <p>
    Незмінно зміцнює позиції широкий вибір глобального громадянства: кімнатні й
    садові рослини, мобільний голосовий зв'язок і свіжі овочі та фрукти для
    стильних особистостей і киян. Хочемо підкорювати домашніх улюбленців
    комфортом інновацій і прагнемо розвивати юридичний захист ваших прав,
    кабельне телебачення і передачу даних разом із замовниками. Упевнене
    вдосконалення, вигідні технології, збільшення рівня капіталізації та
    професіоналізм злагодженої команди забезпечили компанії визнання і провідну
    роль на ринку України.
  </p>
</div>

CSS

Елемент subject та елемент content всередині нього – мають мінімальне оформлення, а текстовому вмісту надані деякі базові налаштування шрифту:

.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

Елемент <div> з класом subject також отримує клас animation – саме в ньому задано view-timeline, щоб означити іменовану часову шкалу прогресу перегляду. Також він отримує ім'я animation-timeline з таким же значенням, щоб оголосити, що це буде елемент, який анімується під час прогресування часової шкали прогресу перегляду. Йому також задано оголошення animation-range, щоб змусити анімацію початися пізніше, ніж очікувалося, і закінчитись раніше.

Врешті решт, на елементі задана анімація, що анімує його непрозорість та масштаб, що змушує його з'являтися та збільшуватися, коли він рухається вгору по області прокручення.

.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range: entry 10% contain 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox вимагає цього для застосування анімації */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}

Результат

Прокрутіть, щоб побачити анімацію елемента-суб'єкта.

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

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Сумісність із браузерами

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.