Оригінальна публікація: How to Create Custom CSS Animations with Examples

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

У цій статті ми розглянемо, як створити круті анімації за допомогою CSS.

Передумови

Перш ніж продовжити, переконайтеся, що у вас є базові знання HTML та CSS.

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

Як створити першу анімацію CSS

Розпочнемо з підготовки елемента HTML.

<body>
  <div class="square"></div>
</body>

.square {
  width: 100px;
  height: 100px;
  background-color: purple;

  /* Центрування елемента */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Рядки 7-10 демонструють часто використовуваний метод центрування елемента за допомогою CSS. Ось результат такого коду:

square center
Відцентрований квадрат

Перш ніж створювати анімацію, потрібно подумати про те, якого ефекту ви хочете досягти.

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

@keyframes bounce {
  0% {
    top: 90%;
  }
  100% {
    top: 10%;
  }
}

Щоб визначити анімацію, потрібно використати правило @keyframes, яке дозволяє визначити ключові кадри у процесі анімації.

Ключові кадри встановлюються з використанням значень у відсотках, починаючи від 0% і закінчуючи 100%. Наприклад, у прикладі анімація почнеться з top: 90%; і закінчиться на top: 10%;, після чого вона повернеться назад до 50%.

І, звісно, потрібно пов’язати анімацію bounce з квадратом (animation-name) і повідомити браузеру, як довго має тривати ця анімація (animation-duration). Ось як це робиться:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
}
square moves up
Квадрат рухається вгору

Як додати декілька ключових кадрів

Але, як ви можете помітити, квадрат розташований знизу, рухається вгору, а потім повертається назад в центр. Це не зовсім ефект стрибка. Як можна зробити так, щоб квадрат рухався вниз?

Для цього можна налаштувати третій ключовий кадр:

@keyframes bounce {
  0% {
    top: 90%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 90%;
  }
}

Таким чином, квадрат почне знизу (top: 90%;), рухатиметься вгору (top: 10%;), а потім повернеться вниз (top: 90%;).

square moves up and then down
Квадрат рухається вгору та вниз

Як створити повторювану анімацію

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

Замість того, щоб створювати більше ключових кадрів, що не так просто, ви можете визначити властивість animation-iteration-count і вказати кількість разів, які ви хочете, щоб анімація повторювалась.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: 5;
}
repeat animation 5 times
Квадрат рухається вгору та вниз п’ять разів

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

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Як застосувати часову функцію до анімації

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

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

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

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

ease in out
Завдяки ease-in-out квадрат рухається плавно

Крива Безьє

Значення ease-in-out фактично представляє математичне рівняння, відоме як крива Безьє. Я обійдусь без складних математичних визначень, а вам потрібно знати лише те, що функція визначає криву з чотирма контрольними точками.

cubic-bezier.com — це онлайн-інструмент, який дозволяє налаштувати криву, просто перетягуючи контрольні точки.

cubic bezier
Крива Безьє

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

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.8, 0.36);
}

У більшості випадків вам не потрібно визначати власну криву Безьє. Існує декілька попередньо визначених кривих, яких достатньо для більшості випадків.

ease представляє криву cubic-bezier(0.25, 0.1, 0.25, 1). Спочатку анімація повільно прискориться, а потім сповільниться до зупинки.

ease
Крива Безьє для ease

ease-in представляє криву cubic-bezier(0.42, 0, 1, 1). Анімація розпочнеться плавно і потім зупиниться досить різко.

ease in
Крива Безьє для ease-in

ease-out представляє криву cubic-bezier(0, 0, 0.58, 1). Анімація розпочнеться різко і потім сповільниться, щоб плавно зупинитися.

ease out
Крива Безьє для ease-out

ease-in-out представляє криву cubic-bezier(0.42, 0, 0.58, 1). Анімація буде плавною як спочатку, так і вкінці.

ease in out
Крива Безьє для ease-in-out

Функція steps()

Окрім плавної кривої, ви можете вказати ступінчасту функцію. Функція steps() приймає два аргументи. Перший вказує кількість кроків, а другий встановлює точку, де відбувається зміна: на початку (start) або в кінці (end) кроку.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(5, start);
}

У цьому випадку анімація буде розділена на п’ять кроків, і для кожного кроку зміна відбудеться на початку.

5 steps
Демо ступінчастої функції

Для функції steps() існують два скорочення: step-start відповідає steps(1, start), а step-end відповідає steps(1, end).

Як поєднати декілька анімацій

Наразі ми розглянули всі основи, які варто знати для створення анімацій за допомогою CSS. Тепер прийшов час бути більш творчими.

Попередні приклади фокусувались на зміні властивості top, щоб створити ефект стрибка. Фактично, ви можете комбінувати декілька властивостей в одній анімації. Наприклад, ви можете створити ефект пульса, змінивши форму і прозорість елемента.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.ball {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  animation: pulse 2s ease-in-out infinite;
}

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

pulse
Ефект пульса

Інші властивості, пов’язані з анімацією

Крім властивостей анімації, про які ми говорили до цього, є декілька різних властивостей, які варто розглянути. Іноді вони також можуть бути корисними.

По-перше, є властивість animation-direction, яка визначає, як буде відтворюватися анімація. Властивість приймає чотири різні значення:

  • normal: анімація відтворюється з початку до кінця;
  • reverse: анімація відтворюється з кінця до початку;
  • alternate: спочатку анімація відтворюється з початку до кінця, а потім навпаки. Працює лише тоді, коли значення animation-iteration-count більше за 1;
  • alternate-reverse: спочатку анімація відтворюється з кінця до початку, а потім навпаки.

За замовчуванням анімація почне відтворюватися одразу після завантаження сторінки. Проте це можна змінити за допомогою властивості animation-delay, яка вказує, як довго ви хочете чекати, перш ніж анімація розпочнеться.

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

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

Якщо встановлено на backwards, елемент прийматиме стилі з першого ключового кадру анімації, як тільки анімація відтвориться.

Якщо встановлено на both, елемент зберігатиме стилі з першого ключового кадру перед початком анімації (подібно до backwards), а також збереже стилі з останнього ключового кадру після завершення анімації (подібно до forwards).

Висновок

Цей урок охопив все, що потрібно знати, перш ніж створювати анімації CSS за допомогою правила @keyframes.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

Ми також розглянули декілька властивостей CSS, пов’язаних з анімацією:

  • animation-duration: визначає тривалість анімації;
  • animation-iteration-count: визначає кількість повторень анімації;
  • animation-timing-function: вказує часову функцію, яка контролює швидкість відтворення анімації;
  • animation-direction: напрямок відтворення анімації;
  • animation-delay: затримка перед початком анімації;
  • animation-fill-mode: чи слід зберігати стилі з анімації після завершення.

Для подальшого вивчення HTML та CSS рекомендую звернутися до циклу курсів -> HTML & CSS: A Practical Guide.