В цьому практичному уроці я покажу вам кілька простих анімацій, які можна створити з допомогою ключових кадрів (keyframes) в CSS. Це будуть найпростіші приклади, більш складніші варіанти розглянемо в наступних уроках. Бажано, щоб спочатку ви ознайомилися із теоретичною частиною — оглянули CSS-анімацію (animation) та ключові кадри @keyframes.
З допомогою ключових кадрів @keyframes
CSS ви можете створювати практично будь-яку анімацію. В основі їх роботи полягає принцип змінюваності CSS стилів за певний проміжок часу. Змінювати CSS стилі можна скільки завгодно разів і в будь-які проміжки часу.
А тепер давайте перейдемо до практики.
Для початку нам потрібно створити 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.
Щоб створити анімацію підстрибування кнопки, я використовую властивість 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; }
За подібним принципом роблю наступні види анімацій.
Для цієї анімації я використовую властивість непрозорості (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; }
Йдемо далі, і по схожому принципу зробимо інші види анімації.
Для цієї анімації я використовую властивість масштабування 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; }
Для цієї анімації я так само використовую властивість непрозорості 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; }
Тут схожа анімація із першим прикладом — підстрибуванням (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; }
Якщо зібрати до купи всі вищерозглянуті види анімації, то вийде ось таке демо, що на відео:
Якщо вам сподобався сьогоднішній урок, поділіться ним з друзями. Якщо у вас є запитання/побажання по даній темі, не соромтеся залишати коментарі у відповідному розділі нижче. Дякую за увагу!
До основних переваг двигуна WordPress можна віднести величезну кількість безкоштовних і преміальних тем (шаблонів) та…
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…