Пошук уроків, статей та іншого контенту
Опишете етапи зміни стилів під час анімації за допомогою правила @keyframes.
Ключові кадри (keyframes) описують, як змінюються стилі елемента протягом анімації. Замість того щоб задавати лише початковий і кінцевий стан, можна визначити кілька проміжних етапів.
Для опису ключових кадрів використовують правило @keyframes:
@keyframes назва-анімації {
/* початковий стан */
from {
/* стилі */
}
/* кінцевий стан */
to {
/* стилі */
}
}Альтернативно замість from і to можна використовувати відсотки:
@keyframes назва-анімації {
0% {
/* початковий стан */
}
50% {
/* проміжний стан */
}
100% {
/* кінцевий стан */
}
}Ключові кадри лише описують сценарій анімації. Щоб застосувати його до елемента, потрібно використати властивість animation або окремі властивості animation-*.
Розглянемо анімацію, під час якої квадрат переміщується вправо та змінює колір:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Ключові кадри анімації</title>
<style>
.box {
width: 80px;
height: 80px;
background-color: royalblue;
animation: move-and-change 3s ease-in-out infinite alternate;
}
@keyframes move-and-change {
from {
transform: translateX(0);
background-color: royalblue;
}
to {
transform: translateX(300px);
background-color: tomato;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>У цьому прикладі:
move-and-change — ім’я анімації;
3s — тривалість одного циклу;
ease-in-out — функція плавності;
infinite — нескінченне повторення;
alternate — кожен другий цикл відтворюється у зворотному напрямку.
Браузер автоматично обчислює проміжні значення між from і to.
Відсотки дають змогу описати кілька етапів анімації. Значення 0% відповідає початку, а 100% — кінцю.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Проміжні ключові кадри</title>
<style>
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #2563eb;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.4);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>Під час цієї анімації елемент:
починає зі звичайного розміру;
збільшується до 1.4 від початкового;
стає напівпрозорим;
повертається до початкового стану.
В одному ключовому кадрі можна змінювати одразу кілька властивостей.
animationВластивість animation дає змогу записати основні параметри в одному рядку:
.element {
animation: назва тривалість функція-плавності затримка кількість-повторів напрямок;
}Наприклад:
.element {
animation: slide-in 800ms ease-out 200ms 1 normal;
}У цьому записі:
slide-in — ім’я анімації;
800ms — тривалість;
ease-out — функція плавності;
200ms — затримка перед початком;
1 — кількість повторень;
normal — напрямок від початку до кінця.
Тривалість потрібно вказувати до затримки. Якщо вказано два часові значення, перше сприймається як тривалість, а друге — як затримка.
Ті самі параметри можна записати окремо:
.element {
animation-name: slide-in;
animation-duration: 800ms;
animation-timing-function: ease-out;
animation-delay: 200ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-play-state: running;
}Такий запис довший, але зручний, коли потрібно змінювати окремі параметри, наприклад через клас або JavaScript.
animation-nameВизначає ім’я правила @keyframes:
.card {
animation-name: appear;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Ім’я має збігатися з назвою після @keyframes.
animation-durationВизначає тривалість одного циклу:
.card {
animation-duration: 500ms;
}Можна використовувати секунди (s) або мілісекунди (ms).
Якщо тривалість не вказана або дорівнює 0s, анімація не матиме видимого ефекту.
animation-timing-functionВизначає, з якою швидкістю відбувається зміна значень:
.element {
animation-timing-function: ease-in-out;
}Поширені значення:
linear — однакова швидкість протягом усього циклу;
ease — повільний початок, швидша середина та повільний кінець;
ease-in — повільний початок;
ease-out — повільний кінець;
ease-in-out — повільний початок і кінець;
steps(4) — зміна дискретними кроками, а не плавно.
animation-delayВизначає затримку перед стартом:
.element {
animation-delay: 1s;
}Від’ємна затримка запускає анімацію так, ніби частина часу вже минула:
.element {
animation-delay: -500ms;
}Це може бути корисно для створення різних фаз у кількох однакових елементів.
animation-iteration-countВизначає кількість повторень:
.element {
animation-iteration-count: 3;
}Для нескінченного повторення використовують infinite:
.element {
animation-iteration-count: infinite;
}animation-directionВизначає напрямок відтворення:
normal — кожен цикл від 0% до 100%;
reverse — кожен цикл від 100% до 0%;
alternate — напрямок змінюється після кожного циклу;
alternate-reverse — починається у зворотному напрямку, а потім змінюється.
.element {
animation-direction: alternate;
}animation-fill-modeВизначає, які стилі застосовуються до і після анімації:
none — стилі ключових кадрів не застосовуються до або після циклу;
forwards — після завершення зберігається стан останнього ключового кадру;
backwards — під час затримки застосовується стан першого ключового кадру;
both — поєднує forwards і backwards.
.message {
opacity: 0;
animation: show-message 600ms ease-out forwards;
}
@keyframes show-message {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Без forwards після завершення анімації елемент повернувся б до стилів, які були задані до її запуску.
animation-play-stateДозволяє призупинити або відновити анімацію:
.spinner {
animation: rotate 1s linear infinite;
}
.spinner:hover {
animation-play-state: paused;
}Допустимі значення:
running — анімація відтворюється;
paused — анімація призупинена.
transformДля переміщення, масштабування та обертання зазвичай використовують transform:
@keyframes example {
0% {
transform: translateX(0) rotate(0deg) scale(1);
}
100% {
transform: translateX(200px) rotate(180deg) scale(1.2);
}
}Функції transform можна комбінувати в одному значенні:
translateX() — переміщення по горизонталі;
translateY() — переміщення по вертикалі;
scale() — зміна масштабу;
rotate() — обертання;
skew() — нахил.
Якщо в наступному ключовому кадрі записати transform, він замінить усе попереднє значення transform. Тому всі потрібні функції варто вказувати разом:
@keyframes correct-animation {
from {
transform: translateX(0) rotate(0deg);
}
to {
transform: translateX(100px) rotate(90deg);
}
}Ключові кадри можна використовувати для короткого повідомлення про взаємодію, наприклад для ефекту натискання:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Анімація кнопки</title>
<style>
.button {
padding: 12px 24px;
border: 0;
border-radius: 8px;
background-color: #2563eb;
color: white;
font: inherit;
cursor: pointer;
}
.button:active {
animation: button-press 180ms ease-out;
}
@keyframes button-press {
0% {
transform: scale(1);
}
50% {
transform: scale(0.94);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<button class="button" type="button">Натисніть мене</button>
</body>
</html>Псевдоклас :active застосовується, поки користувач натискає кнопку. Анімація зменшує кнопку на короткий час і повертає її до початкового розміру.
Часто анімацію додають не до основного класу елемента, а до окремого класу стану:
<div class="notification is-visible">Повідомлення надіслано</div>.notification {
opacity: 0;
}
.notification.is-visible {
animation: notification-in 400ms ease-out forwards;
}
@keyframes notification-in {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}У такому підході клас is-visible може додаватися або видалятися програмно, а CSS відповідає за саму анімацію.
@keyframes і початкові стиліПравило @keyframes не замінює звичайні стилі елемента. Початкові стилі визначають зовнішній вигляд до запуску анімації, якщо animation-fill-mode не змінює цю поведінку.
.panel {
opacity: 1;
transform: translateY(0);
animation: hide-panel 500ms ease-in forwards;
}
@keyframes hide-panel {
to {
opacity: 0;
transform: translateY(-20px);
}
}Тут властивості в to змінюються від значень, заданих у .panel.
До одного елемента можна застосувати кілька анімацій. Їхні назви та параметри розділяють комами:
.icon {
animation:
rotate-icon 2s linear infinite,
change-color 1s ease-in-out infinite alternate;
}
@keyframes rotate-icon {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes change-color {
from {
background-color: royalblue;
}
to {
background-color: tomato;
}
}Важливо, щоб анімації не конфліктували за одну й ту саму властивість. У цьому прикладі перша анімація змінює transform, а друга — background-color.
.element {
animation-name: fade-in;
}Без animation-duration тривалість дорівнює нулю, тому анімацію не видно.
Правильно:
.element {
animation: fade-in 500ms ease-out;
}.element {
animation-name: fade-in;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}fade-in і fade — різні імена. Вони мають збігатися:
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Якщо потрібно залишити кінцевий стан, додайте forwards:
.element {
animation: appear 500ms ease-out forwards;
}Для плавних переміщень і масштабування краще використовувати transform, а для появи та зникнення — opacity:
@keyframes move {
from {
transform: translateX(0);
opacity: 0;
}
to {
transform: translateX(100px);
opacity: 1;
}
}Не слід без потреби анімувати властивості, які змушують браузер постійно перераховувати розмітку, наприклад top, left, width або height.
transform перезаписуєтьсяЦі ключові кадри не створюють одночасне переміщення й обертання:
@keyframes wrong-example {
from {
transform: translateX(0);
transform: rotate(0deg);
}
to {
transform: translateX(100px);
transform: rotate(90deg);
}
}Друге оголошення transform перезаписує перше. Потрібно об’єднати функції:
@keyframes correct-example {
from {
transform: translateX(0) rotate(0deg);
}
to {
transform: translateX(100px) rotate(90deg);
}
}@keyframes описує етапи зміни стилів під час анімації.
Ключові кадри можна позначати from і to або відсотками від 0% до 100%.
Властивість animation застосовує описану анімацію до елемента.
animation-duration є необхідною для видимої анімації.
animation-iteration-count визначає кількість повторень.
animation-direction керує напрямком відтворення.
animation-fill-mode: forwards зберігає кінцевий стан.
Для переміщень, обертань і масштабування зазвичай використовують transform.
В одному ключовому кадрі можна змінювати кілька CSS-властивостей.