MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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

В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:

  1. Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.
  2. Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.
  3. Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.

Конфігурування анімації

Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент animation властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це не конфігурує актуальний вигляд анімації, яка здійснюється проходом через @keyframes at-правила, як це описано в Визначення послідовності анімації через ключові кадри нижче.

Підвластивостями властивості animation є:

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

Визначення послідовності анімації через ключові кадри

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

Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують percentage для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: from і to відповідно. Обидва ці імені є необов'язковими. Якщо from/0% чи to/100% не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.

Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.

Приклади

Примітка: Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають -webkit-префіксовані версії.

Текст, що ковзає у вікні браузера

Цей простий приклад стилізує елемент <p> так, що текст "зісковзує" в вікно браузера з-поза його правого краю.

Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього overflow:hidden.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

В цьому прикладі стиль для <p>-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість animation-duration, а також присвоює ім'я цій анімації, яке використано у ключових кадрах @keyframes . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.

Якщо нам потрібно ще якусь додаткову стилізацію елемента <p> для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.

Ключові кадри визначені через  at-правила @keyframes. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я from). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).

Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я to). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на кнопку CodePen, щоб побачити анімацію в середовищі CodePen)

Додавання інших ключових кадрів

Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.

(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на конпку CodePen, щоб побачити анімацію в середовищі CodePen)

Making it repeat

Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість  animation-iteration-count , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення infinite для отримання постійної анімації:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

Змінюємо напрямки анімації

Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у animation-direction значення alternate:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Використання скорочень для правил анімації

animation скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Їх можна замінити ось таким чином

p {
  animation: 3s infinite alternate slideIn;
}

Примітка: Ви можете дізнатися про це більше на сторінці довідки animation :

Задання множинних значень властивостей анімації

Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:

В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, fadeInOut має тривалість в 2.5s і кількість повторів 2,  і т.д..

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

Використання подій анімації

Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом AnimationEvent, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.

Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.

Додавання CSS

Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації alternate кожного разу. В @keyframes, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.

.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
    margin-left:0%;
    width:100%;
  }
}

Встановлення animation event listeners - прослуховування подій анімації

Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші event listeners; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією eventTarget.addEventListener(). Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.

Чому? Тому що подія animationstart запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.

Отримання подій

Події надсилаються до функції listener(), як це показано нижче.

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

Даний код також дуже простий. Він просто дивиться в event.type, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в <ul> (невпорядкований список), який ми використовуємо для виводу звіту про ці події.

Звіт після завершення роботи буде виглядати якось от так:

  • Started: elapsed time is 0
  • New loop started at time 3.01200008392334
  • New loop started at time 6.00600004196167
  • Ended: elapsed time is 9.234000205993652

Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія animationiteration не була надіслана; натомість надіслало подію animationend.

HTML

Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:

<h1 id="watchme">Watch me move</h1>
<p>
  This example shows how to use CSS animations to make <code>H1</code>
  elements move across the page.
</p>
<p>
  In addition, we output some text each time an animation event fires,
  so you can see them in action.
</p>
<ul id="output">
</ul>
</body>

Дивіться також

Мітки документа й учасники

 Зробили внесок у цю сторінку: GiorgioLviv
 Востаннє оновлена: GiorgioLviv,