Пошук уроків, статей та іншого контенту
Налаштуєте CSS-анімації, поєднуючи ключові кадри з тривалістю, повторенням, напрямком і режимом заповнення.
CSS-анімація змінює значення CSS-властивостей протягом певного часу. Вона складається з двох частин:
@keyframes описує, як саме змінюється елемент.
Властивість animation або окремі властивості animation-* визначають, як і коли відтворювати ці зміни.
Ключові кадри оголошують за допомогою правила @keyframes:
@keyframes назва-анімації {
from {
/* Початковий стан */
}
to {
/* Кінцевий стан */
}
}Альтернативно можна використовувати відсотки:
@keyframes slide-in {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
transform: translateX(20px);
opacity: 0.7;
}
100% {
transform: translateX(0);
opacity: 1;
}
}У цьому прикладі:
на початку елемент зміщений ліворуч і прозорий;
у середині анімації він трохи виходить за кінцеву позицію;
наприкінці повертається у звичайне положення та стає повністю видимим.
Назва slide-in пов’язує ключові кадри з конкретним елементом.
.element {
animation-name: slide-in;
}Самого animation-name недостатньо: без тривалості браузер використовує тривалість 0s, тому анімацію не буде помітно.
Властивість animation-duration визначає, скільки триває один цикл анімації.
.box {
animation-name: slide-in;
animation-duration: 1s;
}Можна використовувати секунди (s) або мілісекунди (ms):
.box {
animation-duration: 750ms;
}Значення 1s означає одну секунду, а 750ms — 750 мілісекунд.
Тривалість впливає на швидкість проходження ключових кадрів:
менша тривалість — швидша анімація;
більша тривалість — повільніша анімація.
За замовчуванням анімація відтворюється один раз. Кількість повторень задає animation-iteration-count.
.box {
animation-iteration-count: 3;
}Значення 3 означає, що анімація повториться тричі.
Для нескінченного повторення використовують infinite:
.loader {
animation-iteration-count: infinite;
}Можна використовувати дробові значення. Наприклад, 0.5 відтворить половину анімації:
.box {
animation-iteration-count: 0.5;
}Це корисно, коли потрібно зупинити анімацію посеред циклу.
Властивість animation-direction визначає, у якому напрямку відтворюються ключові кадри.
normalЗначення за замовчуванням. Кожен цикл проходить від 0% до 100%.
.box {
animation-direction: normal;
}reverseАнімація відтворюється у зворотному напрямку — від 100% до 0%.
.box {
animation-direction: reverse;
}alternateНепарні цикли відтворюються вперед, а парні — назад:
.box {
animation-direction: alternate;
animation-iteration-count: infinite;
}Це створює ефект руху вперед і назад без різкого повернення до початкового стану.
alternate-reverseПерший цикл відтворюється назад, наступний — вперед:
.box {
animation-direction: alternate-reverse;
}Після завершення анімації елемент повертається до звичайних стилів. Властивість animation-fill-mode визначає, які стилі застосовуються до або після анімації.
noneЗначення за замовчуванням. Стилі з ключових кадрів не застосовуються до початку або після завершення анімації.
.box {
animation-fill-mode: none;
}forwardsПісля завершення анімації елемент зберігає стилі останнього ключового кадру:
.box {
animation-fill-mode: forwards;
}Якщо анімація має напрямок normal, останнім буде кадр 100%. Для reverse останнім буде кадр 0%.
backwardsСтилі першого ключового кадру застосовуються ще до початку анімації, зокрема протягом затримки.
.box {
animation-delay: 1s;
animation-fill-mode: backwards;
}bothПоєднує поведінку backwards і forwards:
.box {
animation-fill-mode: both;
}Це означає, що початкові стилі застосовуються під час затримки, а кінцеві зберігаються після завершення.
Властивість animation-delay задає час перед початком анімації:
.box {
animation-delay: 500ms;
}Під час затримки елемент ще не проходить ключові кадри. За замовчуванням він має звичайні стилі. Щоб застосувати стилі першого кадру під час затримки, використовуйте animation-fill-mode: backwards або both.
Затримка може бути від’ємною:
.box {
animation-delay: -1s;
}У такому випадку анімація починається так, ніби одна секунда вже минула.
Властивість animation-timing-function визначає швидкість зміни властивостей протягом одного циклу.
.box {
animation-timing-function: ease-in-out;
}Поширені значення:
linear — рівномірна швидкість;
ease — повільний початок, швидша середина та повільний кінець;
ease-in — повільний початок;
ease-out — повільний кінець;
ease-in-out — повільний початок і кінець.
Ця властивість не змінює тривалість анімації, а лише розподіляє рух усередині заданого часу.
Нижче наведено завершений приклад картки, яка з’являється знизу, трохи збільшується та після завершення зберігає кінцевий стан.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS-анімація</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #eef2ff;
font-family: Arial, sans-serif;
}
.card {
width: min(90%, 320px);
padding: 32px;
border-radius: 16px;
background: white;
color: #1e293b;
text-align: center;
box-shadow: 0 12px 30px rgb(30 41 59 / 15%);
animation-name: show-card;
animation-duration: 900ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
.card h1 {
margin: 0 0 12px;
font-size: 28px;
}
.card p {
margin: 0;
line-height: 1.5;
}
@keyframes show-card {
0% {
transform: translateY(40px) scale(0.9);
opacity: 0;
}
70% {
transform: translateY(-8px) scale(1.02);
opacity: 1;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<article class="card">
<h1>Вітаємо!</h1>
<p>Ця картка з’являється за допомогою CSS-анімації.</p>
</article>
</body>
</html>Послідовність роботи прикладу:
На початку картка зміщена вниз, зменшена та прозора.
Вона поступово стає видимою і трохи збільшується.
Наприкінці повертається до звичайного розміру та положення.
Завдяки animation-fill-mode: forwards кінцевий стан зберігається.
Усі основні параметри можна записати через властивість animation.
Загальний порядок значень:
.element {
animation:
назва
тривалість
функція-часу
затримка
кількість-повторень
напрямок
режим-заповнення;
}Наприклад:
.card {
animation: show-card 900ms ease-out 0s 1 normal forwards;
}Цей запис еквівалентний таким властивостям:
.card {
animation-name: show-card;
animation-duration: 900ms;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}Для читабельності під час навчання або складного налаштування зручно використовувати окремі властивості. Скорочений запис компактніший і часто використовується у готових стилях.
До одного елемента можна застосувати кілька анімацій. Їх розділяють комами:
.element {
animation:
move 2s ease-in-out infinite alternate,
change-color 2s linear infinite alternate;
}У цьому прикладі одна анімація змінює положення елемента, а інша — його колір.
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(120px);
}
}
@keyframes change-color {
from {
background-color: #2563eb;
}
to {
background-color: #f97316;
}
}Якщо для кількох анімацій потрібні різні значення, параметри також розділяють комами відповідно до порядку анімацій.
Анімацію можна запускати під час наведення курсору, додавши її до псевдокласу :hover:
.button {
padding: 12px 20px;
border: 0;
border-radius: 8px;
background: #2563eb;
color: white;
cursor: pointer;
}
.button:hover {
animation: pulse 500ms ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}Коли курсор залишає кнопку, анімація припиняється. Для ефекту, який має зберігатися після першого запуску, потрібно окремо продумати стан елемента та режим заповнення.
.box {
animation-name: slide-in;
}Без animation-duration тривалість дорівнює 0s, тому зміна стану непомітна.
Правильно:
.box {
animation-name: slide-in;
animation-duration: 1s;
}Якщо після завершення елемент повертається назад, додайте:
.box {
animation-fill-mode: forwards;
}alternate працює помітно лише тоді, коли анімація має щонайменше два цикли або повторюється нескінченно:
.box {
animation-direction: alternate;
animation-iteration-count: infinite;
}За одного циклу напрямок alternate не дає очікуваного ефекту руху вперед і назад.
Тривалість потрібно записувати з одиницею:
/* Правильно */
animation-duration: 500ms;
animation-duration: 1s;
/* Неправильно */
animation-duration: 500;Для плавних і продуктивних анімацій зазвичай використовують transform та opacity:
@keyframes fade-and-move {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}Анімація великих змін розмітки або складних властивостей може працювати менш плавно.
Деяким користувачам неприємні або небезпечні надмірні рухи на екрані. CSS має медіазапит prefers-reduced-motion, який дає змогу зменшити або вимкнути анімації за налаштуваннями операційної системи.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Для анімацій, які є лише декоративними, це особливо важливо. Основний вміст і функціональність сторінки не повинні залежати від того, чи відтворюється анімація.
@keyframes описує проміжні стани анімації.
animation-name вибирає потрібні ключові кадри.
animation-duration задає тривалість одного циклу.
animation-iteration-count визначає кількість повторень або нескінченне повторення через infinite.
animation-direction задає напрямок відтворення.
animation-fill-mode визначає стилі до початку та після завершення анімації.
animation-delay додає паузу перед запуском.
animation-timing-function керує швидкістю зміни протягом циклу.
Кілька анімацій можна застосувати до одного елемента, розділивши їх комами.
Для плавності найчастіше анімують transform і opacity.
Налаштування prefers-reduced-motion допомагає врахувати потреби користувачів, чутливих до руху.