Керівництво по CSS анімаціях

4 хв. читання

Ми, розробники і дизайнери, завжди хочемо привернути увагу користувача до свого продукту і залишити гарне враження. Для цього інтерфейс повинен бути простим і зрозумілим, завантажуватися швидко і працювати як швейцарський годинник. Але цього недостатньо? Тут нам на допомогу приходять 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).

Керівництво по CSS анімаціях

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

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

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

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

  • напрям.

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

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

Керівництво по CSS анімаціях

2. Таймінг

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

Керівництво по CSS анімаціях

Керівництво по CSS анімаціях
Використання функції ease
Керівництво по CSS анімаціях
Використання функції linear

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

Керівництво по CSS анімаціях
Використання функції cubic-bezier(.18,.18,.83,-1.33)

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

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

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

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

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

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

Керівництво по CSS анімаціях

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

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

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

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

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

Керівництво по CSS анімаціях

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 анімаціях

Післямова

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

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

Керівництво по CSS анімаціях

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація