Animace jsou mocným doplňkem CSS, ale jejich textová forma s nimi může dělat nepohodlnou práci. Chromové DevTools na záchranu!

Animace CSS, provedené správně, mohou pozvednout váš web na jinou úroveň. Vytváření těchto animací však může být složité bez nástrojů, které nad nimi poskytují jemnou kontrolu. Co kdyby existoval způsob, jak přesně vidět, co se děje na každém kroku vaší animace?

Funkce DevTools v prohlížeči Google Chrome i Firefox přichází s možností kontrolovat vaše animace. Naučte se používat tuto funkci k vylepšení vlastních animací a zpětnému inženýrství vašich oblíbených animací na webu.

DevTools Chrome jsou skvělý způsob ladit všechny aspekty vašeho CSS, a další. Začněte tímto jednoduchým příkladem, abyste pochopili, jak jej můžete použít ke kontrole animací.

Kód pro tyto příklady je k dispozici v úložiště GitHub.

Definujte animace pomocí HTML a CSS

Následující HTML vykresluje stránku se dvěma prvky: a a a. Stránka také importuje soubor CSS s názvem styl.css:

html>
<htmllang="en">





instagram viewer



<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

Chcete-li upravit oba prvky, vytvořte a styl.css soubor ve stejné složce jako HTML a přidejte následující:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-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 tvoří dvě složky:

  • Jednoduchý box, který se při načítání stránky otáčí a mění barvu.
  • Tlačítko, které změní barvu pozadí, když na něj najedete myší.

Všimněte si, že červený rámeček se animuje pomocí CSS direktiva @keyframe, zatímco tlačítko používá přechod. To vám umožní porovnat dva přístupy pomocí nástrojů DevTools prohlížeče.

Pro přístup k Animace karta v Chrome DevTools:

  1. Kliknutím pravým tlačítkem na stránku vyvolejte kontextovou nabídku.
  2. Klikněte Kontrolovat.
  3. Klikněte na trojité tečky v pravém horním rohu.
  4. Navigovat do Další nástroje > Animace.

Tím se otevře zásuvka animace ve spodní části.

Zde se zobrazí všechny animace, které se vyskytují na vaší stránce. Pokud obnovíte stránku a umístíte kurzor na tlačítko, animace se zobrazí na kartě animace.

Skutečná síla přichází, když kliknete na jednu z těchto animací. Pokud například kliknete na animaci pole, uvidíte, že prohlížeč zobrazuje klíčové snímky takto:

DevTools zobrazí všechny animace související s prvkem, který vyberete. Protože je pro červený rámeček definována pouze jediná animace –otáčetAzměnitBarvu– uvidíte pouze jeho detaily.

Přetažením čáry doleva můžete animaci výrazně zrychlit nebo ji přetažením doprava zpomalit. Animaci můžete v určitých bodech pozastavit přepnutím ikon pozastavení a přehrávání. Procenta v horní části umožňují přehrát animaci čtvrtinou její normální rychlosti a desetinou její rychlosti.

Když si prohlédnete přechod tlačítka, DevTools zobrazí jednotlivé vlastnosti přechodu: barvu a barvu pozadí.

Tento nástroj vám umožňuje manipulovat s animací, abyste přesně viděli, jak funguje. Můžete to použít řešení problémů s vaším webem pokud jsou nějaké problémy.

Příklady pokročilé animace

Začněte nahrazením označení v HTML tag s následujícím označením:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Poté nahraďte všechny styly ve vašem styl.css soubor s tímto:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Všechny prvky mají pohyb po krocích na ně aplikovaná animace, která převádí polohu a barvu pozadí. Kromě toho má každý box jinou animaci, která určuje počet kroků, které provede.

Zatímco se třetí políčko neustále posouvá doprava, první dva se posouvají o dva kroky, dokud všechny nedosáhnou konce obrazovky (přičemž druhé políčko začíná před prvním políčkem).

Pokud otevřete Animace v DevTools a obnovte stránku, najdete všechny informace týkající se těchto animací:

Existuje několik prvků, které se všechny animují ve stejném období. V tomto scénáři se barva pozadí a pozice rámečku animují současně pro všechna tři pole.

Další věc, kterou je třeba poznamenat, jsou uzly na každém řádku animace. Když se animace vyskytuje nekonečně mnohokrát, uzly ukazují, kde každé opakování začíná a končí v animaci.

Prázdné uzly jsou v podstatě klíčové snímky vaší animace, zatímco plné barevné uzly představují začátek a konec animace. Při každém začátku animace budete mít tmavé uzly.

Nakonec můžete upravovat animace pomocí nástrojů DevTools, stejně jako u jakékoli vlastnosti CSS. Všechny změny, které provedete pomocí uživatelského rozhraní animace, se zobrazí v inline stylech pod Styly kartu a naopak. To vám umožní provádět změny, testovat je a kopírovat je do vašeho skutečného projektu.

Funkce DevTools prohlížeče Google Chrome je skvělý nástroj pro ladění vašich CSS, včetně animací. Poskytuje detailní pohled na každý přechod a animaci na vaší stránce, takže přesně vidíte, co se děje na každém kroku.

Jako webový vývojář byste měli znát funkci DevTools vašeho prohlížeče nebo její ekvivalent.