Що таке CSS-анімації?

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

Створення анімації

Ми можемо створювати анімації за допомогою правила @keyframes, яке визначає набір CSS-стилів у різних точках анімації. Також необхідно задати ім'я для анімації. Воно має бути описовим, тобто вказувати на тип анімації.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Щоб визначити зміну властивостей у певний момент часу, можна використовувати ключові слова: from (0%) і to (100%). Найчастіше використовуються відсоткові значення.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Після оголошення анімації можна використовувати ім'я keyframes як значення для властивості animation-name для різних елементів. Ще однією перевагою анімацій є можливість багаторазового застосування до різних елементів.

selector {
  animation-name: AnimationName;
}

Практика

Додамо анімацію до елемента div. Наше завдання — змінити властивість background-color з часом. Початковий стан буде green, на 60% потрібно зробити його red, а у фінальному стані — blue. Додатково вкажемо властивість animation-duration, щоб побачити анімацію в дії.