CSS-анімація

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

З усіх , радять по можливості, використовувати всього дві: opacity (прозорість) і transform (трансформація). Це повʼязано з продуктивністю розрахунків браузера для промальовування анімації.

Відмінності анімації від переходів:

Анімації не потрібен обов'язковий ініціатор (подія)
Анімацію можна повторити нескінченну кількість разів
В анімації між початковим і кінцевим станами може бути будь-яка кількість проміжних станів.

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

Щоб використовувати анімацію потрібно спочатку визначити анімацію за допомогою ключових кадрів (@keyframes).

@keyframes animation_name {
  /* Опис кадрів анімації */
}

тут animation_name - імʼя анімації. Має бути описовим і у назві пояснювати, що буде відбуватися.

Станів у анімації має бути щонайменше два (початковий і кінцевий). Їх вказують за допомогою ключових слів from (початковий стан) і to (кінцевий стан).

@keyframes animation_name {
  from {
  /* Початковий стан анімації */
  }
  to {
  /* Кінцевий стан анімації */
  }
}

Утім найчастіше використовують відсотки при вказанні ключових кадрів. У цьому разі ключові слова from - це псевдонім 0% і to - це псевдонім 100%. Ключові кадри задають у проміжку між 0% і до 100% включно.

@keyframes animation_name {
  0% {
    /* Початковий стан анімації */
  }
  
   /* Проміжні стани анімації */
   
  100% {
    /* Кінцевий стан анімації */
  }
}

Можна задати довільну кількість проміжних кадрів. Наведемо приклад анімації із 3 ключових кадрів.

@keyframes myAnimation {
  0% {
    transform: translateX(0); /* Початковий стан анімації (відсоток 0%) */
  }
  50% {
    transform: translateX(50px); /* Проміжний стан анімації (відсоток 50%) */
  }
  100% {
    transform: translateX(100px); /* Кінцевий стан анімації (відсоток 100%) */
  }
}

В анімації не вказують час або елемент, до якого вона буде застосована. Одну і ту саму анімацію можна використовувати повторно для різних елементів. В описі ключових кадрів вказують тільки властивості, які змінюватимуться і відсоток часу від загальної тривалості анімації для вказання місця у часі цього ключового кадру.

Властивості анімації

animation-name

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

animation-name: name;

тут name - назва анімації, визначеної за допомогою @keyframes.

Анімацію можна задати просто елементу:

.box {
  animation-name: myAnimation;
}

Анімацію також можна додати на якусь подію:

.box {

}

.box:hover {
  animation-name: myAnimation;
}

animation-duration

animation-duration - це властивість, яка вказує тривалість одного циклу анімації. Вона вказує, скільки часу триватиме перехід від початкового стану до кінцевого стану анімації. Ця властивість вказується в секундах (s) або мілісекундах (ms).

animation-duration: time;

тут time - тривалість анімації, вказується в секундах (s) або мілісекундах (ms).

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

.box {
  animation-name: myAnimation;
  animation-duration: 3000ms; 
}

За замовчуванням анімація програється один раз. Фінальні значення анімованих властивостей не зберігаються - по закінченню анімації елемент повертається до свого вихідного стану.

animation-timing-function

animation-timing-function - це властивість, яка визначає графік, за яким змінюються значення властивостей анімованого елемента протягом одного циклу анімації. Ця властивість контролює, як швидко або повільно змінюються значення властивостей анімації протягом часу.

Існують різні значення, які можна вказати для властивості animation-timing-function:

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

linear: Анімація відбувається зі сталою швидкістю протягом всього циклу.

ease-in: Анімація починається повільно та збільшує швидкість в кінці.

ease-out: Анімація починається швидко та сповільнюється в кінці.

ease-in-out: Анімація починається повільно, збільшує швидкість в середині та сповільнюється в кінці.

По суті ця властивість повний аналог transition-timing-function для css-переходів.

.box {
  animation-name: myAnimation;
  animation-duration: 3000ms; 
  animation-timing-function: ease-in;
}

animation-delay

animation-delay - це властивість, яка вказує затримку перед початком відтворення анімації. Вона дозволяє встановити паузу перед тим, як анімація розпочне своє відтворення.

animation-delay: time;

тут time - затримка перед початком анімації, вказується в секундах (s) або мілісекундах (ms).

.box {
  animation-name: myAnimation;
  animation-duration: 3000ms; 
  animation-timing-function: ease-in;
  animation-delay: 0.5s;
}

animation-iteration-count

animation-iteration-count - це властивість, яка вказує, скільки разів повториться анімація під час одного циклу. Ця властивість може приймати конкретне число (наприклад, 2, 3, 4 і так далі), або спеціальне значення infinite, що означає нескінченну кількість повторень.

animation-iteration-count: number | infinite;

number: Кількість разів, яку анімація повториться.

infinite: Анімація буде повторюватися нескінченну кількість разів.

.box {
  animation-name: myAnimation;
  animation-duration: 3000ms; 
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

animation-direction

animation-direction - це властивість, яка вказує напрямок відтворення анімації під час кожного циклу. Ця властивість може мати кілька значень, які визначають, як анімація повинна відображатися вперед (від початку до кінця) та назад (від кінця до початку).

animation-direction: normal | reverse | alternate | alternate-reverse;

normal: Анімація відтворюється вперед (за замовчуванням).

reverse: Анімація відтворюється назад, від кінця до початку кожного циклу.

alternate: Анімація відтворюється вперед, а потім назад, чергуючи напрямки кожного циклу.

alternate-reverse: Анімація відтворюється назад, а потім вперед, чергуючи напрямки кожного циклу.

animation-fill-mode

animation-fill-mode - це властивість, яка визначає стилі, які будуть застосовані до елемента до початку та після закінчення анімації. Ця властивість може приймати кілька значень, які вказують, яким чином анімація впливає на стиль елемента до та після свого відтворення.

animation-fill-mode: none | forwards | backwards | both;

none: Немає впливу на стиль елемента до чи після анімації.

forwards: Зберігає стилі анімації на кінцевому стані після відтворення.

backwards: Застосовує стилі анімації на початковому стані до початку відтворення.

both: Об'єднує forwards та backwards.

animation-play-state

animation-play-state - це властивість, яка визначає, чи буде анімація відтворюватися, чи призупиняти своє відтворення. Ця властивість може приймати два значення: running (за замовчуванням) та paused.

animation-play-state: running | paused;

running: Анімація відтворюється (за замовчуванням).

paused: Анімація призупиняє своє відтворення і залишається в поточному стані.

Властивість animation

animation - це скорочена властивість, яка дозволяє задати всі параметри анімації в одній властивості. Ця властивість дозволяє вказати ім'я анімації, тривалість, функцію плавності, затримку перед початком анімації, кількість повторень та напрямок відтворення анімації.

animation: name duration timing-function delay iteration-count direction;

name: Назва анімації, визначена за допомогою @keyframes.

duration: Тривалість одного циклу анімації, вказується в секундах (s) або мілісекундах (ms).

timing-function: Функція плавності, яка вказує, як змінюються значення властивостей впродовж анімації.

delay: Затримка перед початком анімації, вказується в секундах (s) або мілісекундах (ms).

iteration-count: Кількість повторень анімації. Може бути числом або значенням infinite для нескінченного повторення.

direction: Напрямок відтворення анімації (normal, reverse, alternate, alternate-reverse).

@keyframes myAnimation {
  from {
    transform: translateX(0);
    background-color: #3498db;
  }
  to {
    transform: translateX(100px);
    background-color: #da1c5c;
  }
}

.element {
  width: 100px;
  height: 100px; 
  /* Назва, тривалість, функція плавності, затримка, кількість повторень, напрямок */
  animation: myAnimation 2s ease-in-out 1s infinite alternate; 
}

PreviousCSS-переходи Next2D-трансформації

Last updated 1 year ago