css властивість 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 <змінна> {[from | to | <Відсотки>] [, from | to | <Відсотки>] *}

змінна

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

from

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

to

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

%

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

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

@keyframes animationName {


 from {


   top: 0px;


   left:0px;


   }


 33% {


   top: 0px;


   left:150px;


   }	  


 66% {


   top: 150px;


   left:0px;


   }	  	  


 to {


   top: 150px;


   left:150px;


 }


}

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