В цьому практичному уроці я покажу вам кілька простих анімацій, які можна створити з допомогою ключових кадрів (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;
}
Якщо зібрати до купи всі вищерозглянуті види анімації, то вийде ось таке демо, що на відео:
Якщо вам сподобався сьогоднішній урок, поділіться ним з друзями. Якщо у вас є запитання/побажання по даній темі, не соромтеся залишати коментарі у відповідному розділі нижче. Дякую за увагу!
Потрібно більше інформації?
