Az animációk erőteljes kiegészítői a CSS-nek, de szöveges formájuk kényelmetlenné teheti velük a munkát. A Chrome DevTools segítségére!

A megfelelően elkészített CSS-animációk egy másik szintre emelhetik webhelyét. De ezeknek az animációknak az elkészítése bonyolult lehet olyan eszközök nélkül, amelyek pontos irányítást biztosítanak felettük. Mi lenne, ha lenne mód arra, hogy pontosan lássa, mi történik az animáció minden lépésében?

A Google Chrome és a Firefox DevTools funkciója képes megvizsgálni az animációkat. Tanulja meg, hogyan használhatja ezt a funkciót saját animációinak fejlesztésére és kedvenc animációinak visszafejtésére az interneten.

A Chrome DevTools nagyszerű módja annak hibakeresés a CSS minden aspektusában, és ezen kívül még több. Kezdje ezzel az egyszerű példával, hogy megértse, hogyan használhatja animációk vizsgálatára.

A példák kódja itt érhető el egy GitHub adattár.

Animációk meghatározása HTML és CSS segítségével

A következő HTML két elemből álló oldalt jelenít meg: a és a. Az oldal egy nevű CSS-fájlt is importál stílus.css:

instagram viewer 
html>
<htmllang="en">
<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>

Mindkét elem stílusához hozzon létre a stílus.css fájlt ugyanabba a mappába, mint a HTML, és adja hozzá a következőket:

#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;
 }
}

Ezek a stílusok két összetevőt alkotnak:

  • Egy egyszerű doboz, amely az oldal betöltésekor forog és színét változtatja.
  • Egy gomb, amely megváltoztatja a háttérszínét, ha fölé viszi az egérmutatót.

Ne feledje, hogy a piros mező a CSS @keyframe direktíva, míg a gomb átmenetet használ. Ez lehetővé teszi a két megközelítés összehasonlítását a böngésző DevTools segítségével.

Ahhoz, hogy elérje a Animációk lapon a Chrome DevToolsban:

  1. Kattintson a jobb gombbal az oldalra a helyi menü megjelenítéséhez.
  2. Kattintson Vizsgálja meg.
  3. Kattintson a három pontra a jobb felső sarokban.
  4. Navigáljon ide További eszközök > Animációk.

Ezzel megnyílik az animációs fiók az alsó részben.

Az oldalon megjelenő animációk itt fognak megjelenni. Ha frissíti az oldalt, és rámutat a gombra, az animációk megjelennek az animációk lapon.

Az igazi erő akkor jelentkezik, ha rákattint valamelyik animációra. Például, ha rákattint a doboz animációjára, látni fogja, hogy a böngésző a következőképpen jeleníti meg a kulcskockákat:

A DevTools megjeleníti a kiválasztott elemhez kapcsolódó összes animációt. Mivel csak egyetlen animáció van meghatározva a piros dobozhoz –rotateAndChangeColor- csak a részleteket láthatja.

A vonalat balra húzva gyorsabbá teheti az animációt, vagy jobbra húzva lassíthatja az animációt. Az animációt bizonyos pontokon szüneteltetheti is a szünet és a lejátszás ikonok váltásával. A felső százalékok lehetővé teszik, hogy az animációt normál sebességének negyedével, illetve sebességének egytizedével játssza le.

Amikor megvizsgálja a gombátmenetet, a DevTools megmutatja az átmenet egyedi tulajdonságait: a színt és a háttérszínt.

Ezzel az eszközzel manipulálhatja az animációt, hogy pontosan lássa, hogyan működik. Használhatod arra hibaelhárítás a webhelyén ha bármi gond van.

Speciális animációs példák

Kezdje azzal, hogy lecseréli a jelölést a HTML-ben címke a következő jelöléssel:


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>

Ezután cserélje ki az összes stílust stílus.css fájl ezzel:

.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;
 }
}

Mind a elemek rendelkeznek a lépésben lépés animációt alkalmaznak rájuk, amely átállítja a pozíciót és a háttérszínt. Ezen kívül minden dobozhoz más-más animáció tartozik, amely szabályozza a megtett lépések számát.

Míg a harmadik doboz folyamatosan jobbra csúszik, az első kettő egyszerre két lépést tesz, amíg mind el nem éri a képernyő végét (a második doboz az első doboz előtt kezdődik).

Ha kinyitod a Animációk fület a DevToolsban, és frissítse az oldalt, megtalálja az ezekre az animációkra vonatkozó összes információt:

Számos elem van, amelyek mindegyike ugyanabban az időszakban éledik. Ebben a forgatókönyvben a háttérszín és a doboz pozíciója egyszerre animál mindhárom doboz esetében.

Egy másik dolog, amit meg kell jegyezni, az egyes animációs sorok csomópontjai. Ha egy animáció végtelen számú alkalommal fordul elő, a csomópontok megmutatják, hol kezdődik és hol végződik minden ismétlés az animációban.

Az üres csomópontok lényegében az animáció kulcskockái, míg a tömör, színes csomópontok az animáció kezdetét és végét jelentik. Sötét színű csomópontjai lesznek minden alkalommal, amikor az animáció elölről kezdődik.

Végül szerkesztheti az animációkat a DevTools segítségével, akárcsak bármely CSS-tulajdon esetében. Az animációs felhasználói felületen végrehajtott összes módosítás megjelenik a soron belüli stílusokban a alatt Stílusok lapon, és fordítva. Ez lehetővé teszi a módosítások végrehajtását, tesztelését és átmásolását a tényleges projektbe.

A Google Chrome DevTools funkciója egy nagyszerű eszköz a CSS hibakereséséhez, beleértve az animációkat is. Részletes képet ad az oldalon minden átmenetről és animációról, így minden lépésnél pontosan láthatja, mi történik.

Webfejlesztőként ismernie kell böngészője DevTools funkcióját vagy annak megfelelőjét.