Ефективно реалізована CSS анімація здатна значно покращити візуальне сприйняття вебсайту. Однак, створення таких анімацій може виявитися складним завданням без належного інструментарію, що дозволяє контролювати кожен аспект їхньої роботи. Уявіть, як було б корисно мати можливість спостерігати за кожним етапом анімації в режимі реального часу.
Інструменти розробника, наявні в таких браузерах, як Google Chrome та Firefox, пропонують функціонал для аналізу та перевірки CSS анімацій. Давайте розглянемо, як використовувати ці можливості для вдосконалення власних анімаційних ефектів і для аналізу цікавих анімацій, знайдених в інтернеті.
DevTools у Chrome – це потужний набір інструментів, що дозволяє налаштовувати різні елементи CSS, а також багато іншого. Розпочнемо з простого прикладу, щоб продемонструвати, як можна використовувати їх для дослідження анімацій.
Створення анімацій з використанням HTML та CSS
Наступний HTML-код створює веб-сторінку з двома основними елементами:
<div> і <button>. Також, на сторінці відбувається підключення CSS-файлу з назвою “style.css”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Документ</title>
<link rel="stylesheet" href="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css">
</head>
<body>
<div id="box"></div>
<button>Кнопка Тест</button>
</body>
</html>
Для стилізації цих елементів, створіть файл “style.css” у тій же директорії, що й HTML, та додайте наступний код:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}
@keyframes rotateAndChangeColor {
0% {
rotate: 0deg;
background: red;
}
10% {
background: green;
}
40% {
background: blue;
}
70% {
background: yellow;
}
100% {
rotate: 360deg;
background: red;
}
}
Цей CSS-код формує два елементи:
- Квадрат, який обертається і змінює колір під час завантаження сторінки.
- Кнопку, колір фону якої змінюється при наведенні курсора миші.
Зверніть увагу, що анімація червоного квадрата відбувається за допомогою правила CSS “@keyframes”, в той час як кнопка використовує властивість “transition”. Це дозволить нам порівняти обидва підходи за допомогою інструментів розробника в браузері.
Аналіз анімацій з використанням DevTools
Щоб відкрити вкладку “Анімації” у Chrome DevTools, виконайте наступні кроки:
- Клікніть правою кнопкою миші на сторінці, щоб відкрити контекстне меню.
- Виберіть пункт “Перевірити”.
- Натисніть на значок із трьома крапками у верхньому правому куті.
- Перейдіть до “Інші інструменти” > “Анімації”.
Після цього панель “Анімації” з’явиться в нижній частині вікна браузера.
Всі анімації на вашій сторінці будуть відображені тут. При оновленні сторінки та наведенні курсора на кнопку, ви побачите анімацію, що відобразиться у вкладці анімацій.
Справжня сила інструменту проявляється, коли ви натискаєте на одну з анімацій. Наприклад, при натисканні на анімацію квадрата, браузер покаже представлення ключових кадрів анімації у наступному форматі:
Інструменти розробника відображають всі анімації, пов’язані з виділеним елементом. У нашому випадку, для червоного прямокутника визначена тільки одна анімація – “rotateAndChangeColor”, тому відображаються лише її деталі.
Ви можете переміщати лінію на шкалі часу анімації вліво, щоб прискорити її, або вправо, щоб сповільнити. Також є можливість призупиняти анімацію в конкретних моментах за допомогою кнопок паузи та відтворення. Відсоткові значення вгорі дозволяють відтворювати анімацію на чверті або на одній десятій її звичайної швидкості, відповідно.
Коли ви аналізуєте анімацію кнопки, DevTools покаже окремі властивості переходу: колір та колір фону.
Цей інструмент надає можливість керувати анімацією для детального вивчення її роботи. Його можна використовувати для виявлення та виправлення проблем, пов’язаних з анімацією на вашому веб-сайті.
Розширені приклади анімацій
Замініть розмітку у тезі <body> HTML на наступну:
<div class="move-me move-me-1">steps(4, end)</div> <br /> <div class="move-me move-me-2">steps(4, start)</div> <br /> <div class="move-me move-me-3">no steps</div>
Потім замініть весь вміст файлу “style.css” на наступний код:
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4, end) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
До всіх елементів <div> застосована покрокова анімація, яка змінює положення і колір фону. Кожний елемент має свій варіант анімації для управління кількістю кроків руху.
У той час як третій блок рухається плавно, перші два будуть переміщатися стрибками, поки всі не досягнуть кінця екрану (другий блок починає рух раніше за перший).
Якщо ви відкриєте вкладку “Анімації” в DevTools і оновите сторінку, ви знайдете всю інформацію, що відноситься до цих анімацій:
Є декілька елементів, що анімуються протягом одного періоду часу. У цьому випадку, колір фону та положення блоків анімуються одночасно для всіх трьох елементів.
Ще одна річ, на яку слід звернути увагу, це вузли на кожному рядку анімації. Коли анімація повторюється нескінченну кількість разів, вузли показують, де починається і закінчується кожне повторення анімації.
Пусті вузли фактично є ключовими кадрами анімації, тоді як заповнені, кольорові вузли позначають початок і кінець анімації. Вузли темного кольору з’являються кожного разу, коли анімація починається знову.
І, нарешті, ви можете редагувати анімацію за допомогою DevTools так само, як і будь-яку іншу властивість CSS. Усі зміни, внесені в інтерфейсі інструмента анімації, будуть відображені у вбудованих стилях на вкладці “Стилі”, і навпаки. Це дає вам можливість експериментувати зі змінами, тестувати їх та копіювати до свого реального проекту.
Інструмент DevTools в Google Chrome є відмінним помічником для налагодження CSS, особливо коли мова йде про анімації. Він дозволяє детально аналізувати кожен перехід і анімацію на вашій сторінці, даючи можливість побачити, що відбувається на кожному етапі.
Будь-який веб-розробник повинен бути знайомим з функціоналом DevTools в своєму браузері або його аналогами.