Створюємо 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;
}

 

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

 

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