. Stránka také importuje soubor CSS s názvem style.css:
<!DOCTYPE html>
Chcete-li upravit styl obou prvků, vytvořte soubor style.css ve stejné složce jako HTML a přidejte následující:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
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í direktivy CSS @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.
Přístup na kartu Animace v Chrome DevTools:
Kliknutím pravým tlačítkem na stránku vyvolejte kontextovou nabídku.
Klepněte na tlačítko Zkontrolovat.
Klikněte na trojité tečky v pravém horním rohu.
Přejděte na 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 – rotateAndChangeColor – uvidíte pouze její 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 jej použít k odstraňování problémů s webem, pokud se vyskytnou nějaké problémy.
Začněte tím, že nahradíte označení v HTML značce
následujícím označením:
<div class="move-me move-me-1">steps(4, end)</div>
Poté nahraďte všechny styly v souboru style.css tímto:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Všechny prvky
mají aplikovanou animaci pohybu po krocích, která mění 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í rámeček plynule posouvá doprava, první dva se posouvají o dva kroky, dokud nedosáhnou konce obrazovky (přičemž druhý rámeček začíná před prvním rámečkem).
Pokud otevřete kartu Animace v DevTools a obnovíte 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 na kartě Styly 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.
