css властивість keyframes


Правило @keyframes встановлює ключові кадри при анімації елемента. Ключовий кадр - це властивості елемента (прозорість, колір, положення та ін.), які повинні застосовуватися до елементу в заданий момент часу. Таким чином, анімація представляє собою плавний перехід стильових властивостей від одного ключового кадру до іншого. Обчислення проміжних значень між такими кадрами бере на себе браузер.

Найпростіший варіант, коли у нас є тільки два ключових кадру - вихідний і кінцевий стан.

Правило **@keyframes**

В такому випадку @keyframes запишеться в наступному вигляді:

@keyframes box {

  from {left: 0; }

  to {left: 300px; }

}

В даному випадку ми даємо нашому набору ім'я box, воно потім буде задіяно у властивості animation і визначаємо, що елемент буде змінювати значення властивості left від 0 до 300 пікселів. Замість ключових слів from і to можна використовувати, відповідно, 0% і 100%.

Створення анімації

Для створення анімації, @keyframes використовується разом із однієї або декількома властивостями для керування анімаціями, або універсальною властивістю animation. @keyframes дозволяє встановлювати стилі елементу у різні періоди анімації. Якщо точніше, це правило визначає стилі елементу в різні моменти ітерації (циклу) анімації. Ви можете використовувати так властивості як:

  • animation-name - Встановлює одну або кілька анімацій, які застосовуються до елементу. Являє собою ім'я, пов'язане з правилом @keyframes, воно в свою чергу задає послідовність руху.
  • animation-duration - Задає час в секундах або мілісекундах, скільки повинен тривати один цикл анімації. За замовчуванням значення дорівнює 0s, це означає, що ніякої анімації немає.
  • animation-timing-function - Встановлює, згідно якої функції часу повинна відбуватися анімація кожного циклу між ключовими кадрами.
  • animation-delay - Встановлює час очікування перед запуском циклу анімації.
  • animation-iteration-count - Властивість визначає, скільки разів програвати цикл анімації до її зупинки.
  • animation-direction - Встановлює напрямок руху анімації.
  • animation-fill-mode - Визначає, які стилі повинні застосовуватися до елементу, коли анімація не програється.
  • animation-play-state - Властивість визначає, програвати анімацію або поставити її на паузу.

або універсальну властивість animation, щоб задати швидкість анімації, кількість циклів тощо.

Наприклад, ці два блоки стилів рівнозначні:

.block{

	animation-name: animationName;

	animation-duration: 1.75s;

	animation-timing-function: linear;

	animation-delay: 2.5s;

	animation-iteration-count: infinite;

	animation-direction: alternate;

	animation-fill-mode: none;

}

та

.block{

	animation: animationName 1.75s linear 2.5s infinite alternate none;

}

Анімацію можна присвоїти для елементу використовуючи її ім'я. Ви визначаєте це ім'я при створенні правила @keyframes, і присвоюєте за допомогою animation-name (прописуючи цю властивість окремо або у animation).

Селектори правила

Кожне правило @keyframes містить одне або декілька селекторів, які задають окремі точки протягом дії анімації.

Можна використовувати from/to селектори або проценти, або обидва. from - еквівалент 0% і ознаає початок анімації. to - еквівалент 100% і означає кінець анімації. Ви також можете використовувати різні процентні значення. Наприклад, селектор 20% означає 20% часу від початку анімації, 50% - середину анімації.

Ключовий кадр

Кожен ключовий кадр прописаний всередині {}. Кожен селектор містить один або більше ключових кадрів. Ви також можете використовувати властивість animation-timing-function (прописуючи її окремо або у animation), щоб задати як анімація змінюватиме свою швидкість протягом демонстрації.

Нотатка:

Барузер ігнорує неанімовані правила прописані у правилі @keyframes.

Нотатка:

@keyframes не може бути вкладеною в інше правило @keyframes. Тому анімація для одного елемента може користуватися тільки з одного ключового кадра в конкретну точку періоду демонстрації анімації.

Нотатка:

Якщо дублюється селектори, браузер використовує останній з однакових селекторів для малювання ключового кадру.

Нотатка:

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

Нотатка:

Правила всередині @keyframes, із зазначеним !important - ігноруються.

Синтаксис

@keyframes <змінна> {[from | to | <Відсотки>] [, from | to | <Відсотки>] *}

Властивість keyframes може отримувати 4 значення:

змінна

Унікальна змінна, яка пов'язує @keyframes з animation, через цю властивість налаштовується час анімації і інші її параметри.

from

Початок анімації

to

Кінець анімації

%

Відсоток часу, від початку анімації

Значення без задання: немає
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: Інтерфейс CSSKeyframesRule

Переглядачі

Переглядач
keyframes

43

10

16.0

9.0

30.0

12.0

Переглядач
keyframes

16.0

9.2


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Використання ет-правила @keyframes

Приклад роботи властивості

Простий приклад

@keyframes animationName {


 from {


   top: 0px;


   left:0px;


   }


 33% {


   top: 0px;


   left:150px;


   }	  


 66% {


   top: 150px;


   left:0px;


   }	  	  


 to {


   top: 150px;


   left:150px;


 }


}

Додаткові посилання