@keyframes
Оновлено: 15.12.2022
@keyframes
Правило @keyframes встановлює ключові кадри під час анімації елемента. Ключовий кадр - це властивості елемента (прозорість, колір, положення та ін.), які мають застосовуватися до елемента в заданий момент часу. Таким чином, анімація являє собою плавний перехід стильових властивостей від одного ключового кадру до іншого. Обчислення проміжних значень між такими кадрами бере на себе браузер.
Найпростіший варіант, коли у нас є тільки два ключових кадри - вихідний і кінцевий стан (рис. 1).
У такому разі @keyframes запишеться в такому вигляді:
@keyframes box {
from { left: 0; }
to { left: 300px; }
}
У цьому випадку ми даємо нашому набору ім'я box, воно потім буде задіяно у властивості animation і визначаємо, що елемент змінюватиме значення властивості left від 0 до 300 пікселів. Замість ключових слів from і to можна використовувати, відповідно, 0% і 100%.
Ключові кадри не обов'язково мають починатися з 0% і закінчуватися 100%. Анімація тоді відбуватиметься не одразу.
@keyframes box {
50% { left: 0; }
90% { left: 300px; }
}
Синтаксис
@keyframes <змінна> { [ from | to | <відсотки> ] [, from | to | <відсотки> ]* }
Значення
| <змінна> | Унікальна змінна, яка пов'язує @keyframes з animation, через цю властивість налаштовується час анімації та інші її параметри. |
| from | Перший ключовий кадр, аналогічний 0%. |
| to | Останній ключовий кадр, аналогічний 100%. |
| <відсотки> | Встановлює ключовий кадр у відсотках від часу всієї анімації. |
Приклад
Примітка
Chrome до версії 43, Opera до версії 30, Safari до версії 9 та Android підтримують @-webkit-keyframes.
Firefox до версії 16 підтримує @-moz-keyframes.