Ми, розробники і дизайнери, завжди хочемо привернути увагу користувача до свого продукту і залишити гарне враження. Для цього інтерфейс повинен бути простим і зрозумілим, завантажуватися швидко і працювати як швейцарський годинник. Але цього недостатньо? Тут нам на допомогу приходять CSS-анімації.

CSS-анімації, в порівнянні з аналогами на JavaScript, що взаємодіють з DOM, працюють краще.

1. Keyframes

Ми анімуємо всі об'єкти на сторінці, поступово змінюючи їх стан. За допомогою keyframes, ми можемо контролювати стан об'єкта на кожному з етапів:

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

Ми створили анімацію pulse, яка складається з трьох етапів: 0%, 50%, 100% і використовує scale3d (x, y, z).

Після того, як анімація оголошена, ми можемо контролювати:

• час її відтворення,

• через скільки секунд почнеться її відтворення,

• кількість повторень анімації,

• напрям.

button { 
   animation-duration: 1s; 
   animation-name: pulse; 
}

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

2. Таймінг

Ми використовуємо функцію таймінгу щоб визначити в який момент анімація повинна прискоритися, а коли уповільнитися. Можливі варіанти: initial, inherit, ease, ease-in, ease-out та linear.

Відрегулювати таймінг вашої анімації досить просто: навіть якщо вам не підходять стандартні функції, ви можете створити власну, використовуючи функцію cubic-bezier.

3. Затримка анімації

Ми використовуємо цю функцію коли хочемо відтягнути початок відтворення анімації. Анімація тригериться, але стартує лише через деякий час. Наприклад, ось ця кнопка "Send Feedback":

4. Стан анімації

Він використовується коли потрібно вказати відтворювати анімацію чи призупиняти.

• running — анімація відтворюється,

• paused — анімація призупинена.

5. Кількість ітерацій

Цей параметр використовується щоб визначити скільки раз потрібно відтворювати анімацію:

• infinite — анімація відтворюється безкінечно,

• x — анімація відтворюється x разів,

• inherit — успадкування значення від батьківського елемента.

6. Напрям анімації

Напрям анімації визначає її стартову точку та фінальну. Можливі варіанти:

• normal — стартує з 0%, закінчується на 100%.

• reverse — стартує зі 100%, закінчується на нулі.

• alternate — стартує з 0%, відтворюється до 100%, потім знову до 0%.

• alternate-reverse — стартує зі 100%, відтворюється до 0%, потім знову до 100%.

7. Animation Fill Mode

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

• backwards — після завершення анімації до елементу застосовуються стилі, вказані на етапі 0%,

• forwards — після завершення анімації до елементу застосовуються стилі, вказані на етапі 100%,

• both — застосовує правила з обох: forwards та backwards,

• initial — встановлює значення за умовчуванням.

8. Will-Change

За допомогою цієї властивості ми можемо вказати браузеру які властивості будемо анімувати. Це дозволяє краще оптимізувати анімації і досягти більшої швидкодії.

button { 
   will-change: transform, opacity; 
}

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

*, *::before, *::after { 
    will-change: all 
}

Супер четвірка

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

Післямова

В цій статті я виклав лише базові поняття про CSS-анімації. Але цього вже достатньо щоб створювати гарні анімації для вашого веб-сайту. Решта — справа вашої креативності.

А якщо вам потрібно трохи натхнення, або ви хочете подивитися на дійсно якісні роботи, то зазирніть на Codepen CSS Animations.