. Сторінка також імпортує файл CSS під назвою style.css:
<!DOCTYPE html>
Щоб стилізувати обидва елементи, створіть файл style.css у тій же папці, що й HTML, і додайте наступне:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Ці стилі створюють два компоненти:
Просте поле, яке обертається та змінює колір під час завантаження сторінки.
Кнопка, яка змінює колір фону при наведенні на неї курсора.
Зауважте, що червоне поле анімує за допомогою директиви CSS @keyframe, тоді як кнопка використовує перехід. Це дає вам змогу порівняти два підходи за допомогою DevTools браузера.
Щоб отримати доступ до вкладки «Анімація» в Chrome DevTools:
Клацніть правою кнопкою миші свою сторінку, щоб відкрити контекстне меню.
Натисніть Перевірити.
Натисніть на потрійну крапку у верхньому правому куті.
Перейдіть до Додаткові інструменти > Анімація.
Це відкриє панель анімації в нижній частині.
Будь-яка анімація на вашій сторінці відображатиметься тут. Якщо ви оновите сторінку та наведете курсор на кнопку, анімація відобразиться під вкладкою анімації.
Справжня сила з’являється, коли ви натискаєте одну з цих анімацій. Наприклад, якщо ви клацнете анімацію поля, ви побачите, що браузер представляє ключові кадри таким чином:
Інструменти розробника відображають усі анімації, пов’язані з вибраним елементом. Оскільки для червоного прямокутника визначено лише одну анімацію — rotateAndChangeColor — ви побачите лише її деталі.
Ви можете перетягнути лінію ліворуч, щоб пришвидшити анімацію, або перетягнути її праворуч, щоб уповільнити анімацію. Ви також можете призупинити анімацію в певні моменти, перемикаючи значки паузи та відтворення. Відсотки вгорі дозволяють відтворювати анімацію на чверті її звичайної швидкості та на одній десятій її швидкості відповідно.
Коли ви перевіряєте перехід кнопки, DevTools покаже окремі властивості переходу: колір і колір фону.
Цей інструмент дозволяє керувати анімацією, щоб точно побачити, як вона працює. Ви можете використовувати його для усунення несправностей свого веб-сайту, якщо виникнуть проблеми.
Розширені приклади анімації
Почніть із заміни розмітки в тегу HTML
на таку розмітку:
<div class="move-me move-me-1">steps(4, end)</div>
Потім замініть усі стилі у вашому файлі style.css цим:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
До всіх елементів
застосована поетапна анімація, яка змінює положення та колір фону. На додаток до цього, кожне поле має різну анімацію для контролю кількості кроків, які воно зробить.
У той час як третя коробка плавно ковзає праворуч, перші дві рухатимуться на два кроки за раз, доки всі не досягнуть кінця екрана (друга коробка починається перед першою).
Якщо ви відкриєте вкладку «Анімації» в DevTools і оновите сторінку, ви знайдете всю інформацію, що стосується цих анімацій:
Є кілька елементів, які оживляються протягом одного періоду. У цьому сценарії колір фону та положення поля анімуються одночасно для всіх трьох ящиків.
Ще одна річ, на яку слід звернути увагу, це вузли на кожному рядку анімації. Коли анімація повторюється нескінченну кількість разів, вузли показують, де починається і закінчується кожне повторення в анімації.
Порожні вузли, по суті, є ключовими кадрами вашої анімації, тоді як суцільні, кольорові вузли представляють початок і кінець анімації. Ви матимете вузли темного кольору щоразу, коли ваша анімація починається заново.
Нарешті, ви можете редагувати анімацію за допомогою DevTools, так само як і за допомогою будь-якої властивості CSS. Усі зміни, які ви вносите за допомогою інтерфейсу користувача анімації, відображатимуться у вбудованих стилях на вкладці «Стилі» і навпаки. Це дає вам змогу вносити зміни, тестувати їх і копіювати у свій фактичний проект.
Функція DevTools у Google Chrome — це чудовий інструмент для налагодження вашого CSS, зокрема анімації. Він забезпечує детальний перегляд кожного переходу та анімації на вашій сторінці, тож ви можете точно бачити, що відбувається на кожному кроці.
Як веб-розробник, ви повинні бути знайомі з функцією DevTools вашого браузера або її еквівалентом.
