Využití DevTools pro ladění CSS animací
Dobře implementované CSS animace mohou posunout vzhled webové stránky na vyšší úroveň. Nicméně, vytváření takových animací bez nástrojů, které umožňují precizní kontrolu, může být náročné. Představte si možnost detailně sledovat průběh každého kroku animace.
Vývojářské nástroje (DevTools) v prohlížečích Google Chrome a Firefox nabízejí funkci pro inspekci animací. Naučte se, jak tuto funkcionalitu využít k vylepšení vlastních animací a dekonstrukci oblíbených animací na webu.
Chrome DevTools jsou výborným pomocníkem při ladění všech aspektů CSS. Začněme jednoduchým příkladem, abyste pochopili, jak lze tyto nástroje použít ke kontrole animací.
Definice animací pomocí HTML a CSS
Následující HTML kód zobrazuje stránku s dvěma elementy: <div> a <button>. Stránka také načítá CSS soubor s názvem style.css:
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animace v CSS</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>Testovací tlačítko</button>
</body>
</html>
Pro stylizaci obou elementů vytvořte soubor style.css ve stejné složce jako HTML a vložte do něj následující kód:
#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;
}
}
Tyto styly definují:
- Jednoduchý box, který se při načtení stránky otáčí a mění barvu.
- Tlačítko, které mění barvu pozadí a textu při najetí myší.
Červený box animujeme pomocí CSS direktivy @keyframe, zatímco tlačítko používá přechod. To nám umožní porovnat oba přístupy v DevTools.
Kontrola animací pomocí DevTools
Pro zobrazení karty Animace v Chrome DevTools:
- Klikněte pravým tlačítkem na stránku a zvolte „Zkontrolovat“.
- Klikněte na ikonu tří teček v pravém horním rohu DevTools.
- Vyberte „Další nástroje“ a následně „Animace“.
Tím se otevře panel Animace ve spodní části DevTools.
Zobrazí se zde všechny animace na vaší stránce. Po obnovení stránky a přejetí myší přes tlačítko se animace zobrazí v panelu Animace.
Skutečná síla tohoto nástroje se ukáže po kliknutí na konkrétní animaci. Například, po kliknutí na animaci boxu prohlížeč zobrazí klíčové snímky:
DevTools zobrazuje všechny animace spojené s vybraným elementem. Pro červený box je definována pouze animace rotateAndChangeColor, a proto se zobrazují pouze její detaily.
Posunutím lišty doleva lze animaci zrychlit, posunutím doprava ji zpomalit. Animaci je možné v libovolném bodě pozastavit pomocí ikony pauzy/spuštění. Procenta v horní části umožňují přehrát animaci čtvrtinovou nebo desetinovou rychlostí.
Při prohlížení přechodu tlačítka DevTools zobrazuje jednotlivé vlastnosti přechodu: barvu a barvu pozadí.
Tento nástroj umožňuje manipulovat s animací a detailně pochopit její fungování. Lze jej použít k odstraňování problémů na webu.
Pokročilé příklady animací
Nahraďte stávající obsah elementu <body> v HTML kódu následujícím:
<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>
Následně nahraďte veškerý obsah souboru style.css tímto kódem:
.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;
}
}
Všechny elementy <div> nyní mají aplikovanou animaci, která mění jejich pozici a barvu pozadí. Každý box má navíc jinou animaci, která definuje počet kroků v animaci.
Zatímco třetí box se plynule posouvá doprava, první dva se pohybují po krocích, dokud nedosáhnou pravého okraje (druhý box začíná o krok dříve než první).
Po otevření panelu Animace v DevTools a obnovení stránky, najdete zde veškeré informace o těchto animacích:
Všechny tři elementy se animují ve stejném časovém úseku. V tomto případě se barva pozadí a pozice boxu animují současně pro všechny tři boxy.
Důležité jsou také uzly na každé řádce animace. U nekonečně se opakující animace tyto uzly ukazují, kde začíná a končí každé její opakování.
Prázdné uzly představují klíčové snímky animace, plné barevné uzly označují začátek a konec animace. Na začátku každé iterace animace se vždy objeví tmavý uzel.
Stejně jako u jakékoliv CSS vlastnosti, lze animace editovat v DevTools. Všechny provedené změny se projeví jak v uživatelském rozhraní animací, tak v inline stylech v panelu Styly. To umožňuje testování změn a jejich následné kopírování do skutečného projektu.
Funkce DevTools v prohlížeči Google Chrome je skvělý nástroj pro ladění CSS, včetně animací. Nabízí detailní pohled na každý přechod a animaci na vaší stránce a umožňuje sledovat, co se děje v každém kroku.
Jako webový vývojář byste měli být obeznámeni s DevTools svého prohlížeče nebo jeho ekvivalentem.