@keyframes у CSS — ключові кадри анімації

Правило @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.

автор: Svitlana правити

Нотатка

@keyframes не може бути вкладеною в інше правило @keyframes. Тому анімація для одного елемента може користуватися тільки з одного ключового кадра в конкретну точку періоду демонстрації анімації.

автор: Svitlana правити

Нотатка

Якщо дублюється селектори, браузер використовує останній з однакових селекторів для малювання ключового кадру.

автор: Svitlana правити

Нотатка

Властивості, які не зазначені у кожному ключовому кадрі інтерполюються якщо можливо. Властивості, які не можуть інтерполюватися - не використовуються.

автор: Svitlana правити

Нотатка

Правила всередині @keyframes, із зазначеним !important - ігноруються.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

@keyframes <змінна> {[from | to | <Відсотки>] [, from | to | <Відсотки>] *}

Правило keyframes може отримувати 4 значень:

from

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

автор: Svitlana

правити

to

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

автор: Svitlana

правити

%

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

автор: Svitlana

правити

змінна

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

автор: Svitlana

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	43	16	9	30	12	10

Підтримка: мобільні переглядачі

Переглядач
	43	43	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<p>Цей приклад показує як працює правило <code>@keyframe</code>. Змінюйте значення нижче, щоб змінити правило анімації, яке буде задіяне для відображення блоку нижче.</p>

<p><code>@keyframes left {
  0% { left: 0; }
  100% { left: -100%; }
}</code></p>

<p><code>@keyframes right {
  0% { left: 0; }
  100% { left: 100%; }
}</code></p>

<hr>
  
<div class="inputs">
  
  <input id="left" checked name="keyframe" type="radio"/>
  <label for="left">left</label>
  <message for="left">Задіяна перша анімація.</message>
  
  <input id="right" name="keyframe" type="radio"/>
  <label for="right">right</label>
  <message for="right">Задіяна друга анімація.</message>
  
</div>

<div class="wm">
  <p id="message">Задіяна перша анімація.</p>
</div>

<hr>

<div class="wrapper">
	<div class="box">
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
		<span>tempor incididunt ut labore et dolore magna aliqua.</span>
	</div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

.wrapper {
  background-color: #dcdcdc;
}

.box {
	width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation-name: left;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  font-weight: 700;
}

span {
  float: left;
  width: 50%;
}

@keyframes left {
  0% { left: 0; }
  100% { left: -100%; }
}

@keyframes right {
  0% { left: 0; }
  100% { left: 100%; }
}

hr {
  margin-bottom: 16px;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('animation-name', this.id));

}));

<div class="info">
	<p>За допомогою правила <code>@keyframes</code> ми можемо створювати свторювати анімаційні ефекти використовуючи CSS.</p>
	<p>Нижче, показаний приклад такої анімації. Ми визначили початкову та кінцеву позицію тексту, та швидкість зміни цієї позиції.</p>
</div>

<div class="wrapper">
	<div class="box">
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
		<span>tempor incididunt ut labore et dolore magna aliqua.</span>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 15px;
	overflow: hidden;
	line-height: 1.45;
}

.info {
	padding: 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
  background-color: #dcdcdc;
}

.box {
	width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: anim 5s linear infinite;
  font-weight: 700;
}

span {
  float: left;
  width: 50%;
}

@keyframes anim {
  0% { left: 0; }
  100% { left: -100%; }
}

<div class="block">
  I can jump!
</div>

@keyframes animate {
  
  from { 
    margin-top: 50px; 
  }
  
  50%  {
    /* ignored */
    margin-top: 150px !important; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

.block {
  background-color: red;
  padding: 36px 26px;
  width: 75px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  animation: animate 1s ease-in 0s infinite alternate;
}

<div class="stage">
  <div class="mover">Обходжу квадрат по кутах</div>
</div>

.stage {
  position: relative;
  height: 200px;
}

.mover {
  position: absolute;
  width: 150px;
  padding: 8px;
  background-color: #264653;
  color: #fff;
  animation: animationName 4s linear infinite;
}

@keyframes animationName {
 from {
   top: 0px;
   left:0px;
   }
 33% {
   top: 0px;
   left:150px;
   }	
 66% {
   top: 150px;
   left:0px;
   }	  	
 to {
   top: 150px;
   left:150px;
 }
}