. Az oldal egy style.css nevű CSS-fájlt is importál:
<!DOCTYPE html>
Mindkét elem stílusának beállításához hozzon létre egy style.css fájlt ugyanabban a mappában, mint a HTML, és adja hozzá a következőket:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
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.
Vegye figyelembe, hogy a piros mező a CSS @keyframe direktívával animál, 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.
A Chrome DevTools Animációk lapjának elérése:
Kattintson a jobb gombbal az oldalra a helyi menü megjelenítéséhez.
Kattintson az Ellenőrzés gombra.
Kattintson a három pontra a jobb felső sarokban.
Lépjen a További eszközök > Animációk menüpontra.
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 definiálva a piros mezőhöz – rotateAndChangeColor –, csak annak részleteit 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álhatja webhelye hibaelhárítására, ha bármilyen probléma merül fel.
Kezdje azzal, hogy lecseréli a HTML
címkén belüli jelölést a következő jelölésre:
<div class="move-me move-me-1">steps(4, end)</div>
Ezután cserélje le a style.css fájl összes stílusát erre:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Az összes
elemre alkalmazzák a lépésenkénti animációt, 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 megnyitja az Animációk lapot a DevToolsban, és frissíti az oldalt, minden információt megtalál ezekkel az animációkkal kapcsolatban:
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 kezelőfelületen végrehajtott összes módosítás megjelenik a Stílusok lap belső stílusaiban, é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.
