Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 17.04.2024)
456050
осіб
347
літаків
325
гелікоптерів
7193
танків
13827
ББМ
11624
артилерія
760
ППО
1046
РСЗВ
15587
машин
26
кораблі і катери
Створюємо 5 простих CSS анімацій використовуючи ключові кадри
Опубліковано

Створюємо 5 простих CSS анімацій використовуючи ключові кадри

В цьому практичному уроці я покажу вам кілька простих анімацій, які можна створити з допомогою ключових кадрів (keyframes) в CSS. Це будуть найпростіші приклади, більш складніші варіанти розглянемо в наступних уроках. Бажано, щоб спочатку ви ознайомилися із теоретичною частиною — оглянули CSS-анімацію (animation) та ключові кадри @keyframes.

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

А тепер давайте перейдемо до практики.

 

Як створити CSS анімацію з @keyframes

Для початку нам потрібно створити HTML елемент, для якого будемо задіювати анімацію. Це може виглядати приблизно так:

<div class="blok-dlya-animaciyi">
  <button class="animaciya {тип анімації} btn-button">Кнопка</button>
</div>

За допомогою наведеного вище коду я створив батьківський елемент div з класом blok-dlya-animaciyi (обгортку для анімованого елементу), і дочірній елемент Кнопка (button) з потрібними класами: animaciya (загальні налаштування анімації) та {тип анімації} (замінити пізніше на конкретний тип анімації). Нижче надаємо CSS стилів для загальних налаштувань анімації:

/* Загальна конфігурація анімації (тривалість і режим) */
.animaciya {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

Далі, використовуючи клас {тип анімації}, я буду визначати те, яку анімацію хочу застосувати до елемента.

Нижче я наведу приклад 5 основних та простих анімацій, які можна легко створити лише з допомогою ключових кадрів @keyframes в CSS.

 

Анімація підстрибування (bounce)

Щоб створити анімацію підстрибування кнопки, я використовую властивість transform, щоб змінювати координати об’єкта, та з допомогою ключових кадрів @keyframes розподілити по часу ці зміни. Наведений нижче код дозволяє переміщувати кнопку вгору та вниз (по вертикальній осі). Зверніть увагу, що ми повинні замінити клас {тип анімації} на bounce (в даному випадку; нижче в прикладах — інші класи). Додайте ці стилі у свій HTML файл і ви задієте анімацію у вигляді підстрибування кнопки:

/* Ключові кадри анімації підстрибування (bounce) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
  40% {-webkit-transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}
/* застосовую анімацію підстрибування (bounce) до кнопки */
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

За подібним принципом роблю наступні види анімацій.

 

Анімація появи/зникнення через затухання (fade)

Для цієї анімації я використовую властивість непрозорості (opacity) в CSS:  для появи (fadeIn) кнопки — від 0 до 1, а для згасання (fadeOut) — від 1 до 0. Ось такий виходить CSS код:

/* Ключові кадри анімації появи через затухання fadeIn */
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/* застосовую анімацію появи через затухання (fadeIn) до кнопки */
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
/* Ключові кадри анімації зникнення через затухання fadeOut */
@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fadeOut{
  0% {opacity: 1;}
  100% {opacity: 0;}
}
/* застосовую анімацію зникнення через затухання (fadeOut) до кнопки */
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

Йдемо далі, і по схожому принципу зробимо інші види анімації.

 

Анімація пульсування (pulse)

Для цієї анімації я використовую властивість масштабування scale:

/* Ключові кадри анімації пульсування (pulse) */
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.1); }
  100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* застосовую анімацію пульсування (pulse) до кнопки */
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

 

Анімація спалахування (flash)

Для цієї анімації я так само використовую властивість непрозорості opacity CSS, але з більшою частотою, щоб отримати ефект спалаху:

/* Ключові кадри анімації спалахування (flash) */
@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
/* застосовую анімацію спалахування (flash) до кнопки */
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

 

Анімація струшування/тремтіння (shake)

Тут схожа анімація із першим прикладом — підстрибуванням (bounce), але замість вгору/вниз, я рухаю елемент по горизонталі — зліва направо:

/* Ключові кадри анімації струшування (shake) */
@-webkit-keyframes shake {
  0%, 100% {-webkit-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
  20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/* застосовую анімацію струшування (shake) до кнопки */
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

 

Якщо зібрати до купи всі вищерозглянуті види анімації, то вийде ось таке демо, що на відео:

 

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *