Animacije su moćan dodatak CSS-u, ali njihov tekstualni oblik može učiniti neugodnim za rad. Chromeovi DevTools u pomoć!

CSS animacije, izvedene ispravno, mogu podići vašu stranicu na višu razinu. Ali stvaranje ovih animacija može biti teško bez alata koji pružaju finu kontrolu nad njima. Što ako postoji način da točno vidite što se događa na svakom koraku vaše animacije?

Značajka DevTools i Google Chrome i Firefox dolazi s mogućnošću pregleda vaših animacija. Naučite kako koristiti ovu značajku za poboljšanje vlastitih animacija i obrnuti inženjering omiljenih animacija na webu.

Chromeov DevTools izvrstan je način da otklonite pogreške u svim aspektima vašeg CSS-a, i još mnogo toga. Započnite s ovim jednostavnim primjerom da biste razumjeli kako ga možete koristiti za pregled animacija.

Kôd za ove primjere dostupan je u GitHub repozitorij.

Definirajte animacije pomoću HTML-a i CSS-a

Sljedeći HTML prikazuje stranicu s dva elementa: a i a. Stranica također uvozi CSS datoteku pod nazivom stil.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>

Da biste stilizirali oba elementa, stvorite a stil.css datoteku u istoj mapi kao i HTML i dodajte sljedeće:

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

Ovi stilovi stvaraju dvije komponente:

  • Jednostavan okvir koji se vrti i mijenja boju kada se stranica učita.
  • Gumb koji mijenja boju pozadine kada prijeđete iznad njega.

Imajte na umu da crveni okvir animira pomoću CSS direktiva @keyframe, dok gumb koristi prijelaz. To vam omogućuje da usporedite dva pristupa pomoću DevTools preglednika.

Za pristup Animacije kartica u Chrome DevTools:

  1. Desnom tipkom miša kliknite svoju stranicu da biste prikazali kontekstni izbornik.
  2. Klik Pregledati.
  3. Kliknite na trostruke točke u gornjem desnom kutu.
  4. Idite do Više alata > Animacije.

Ovo će otvoriti ladicu animacije u donjem dijelu.

Ovdje će se prikazati sve animacije koje se pojave na vašoj stranici. Ako osvježite svoju stranicu i zadržite pokazivač miša na gumbu, animacije će se pojaviti ispod kartice animacije.

Prava snaga dolazi kada kliknete na jednu od ovih animacija. Na primjer, ako kliknete na animaciju okvira, vidjet ćete da preglednik predstavlja ključne kadrove na sljedeći način:

DevTools prikazuje sve animacije koje se odnose na element koji odaberete. Budući da postoji samo jedna animacija definirana za crveni okvir—rotateAndChangeColor— samo ćete vidjeti njegove detalje.

Crtu možete povući ulijevo kako bi animacija bila puno brža ili je povući udesno da biste usporili animaciju. Također možete pauzirati animaciju u određenim trenucima prebacivanjem ikona pauze i reprodukcije. Postoci na vrhu omogućuju reprodukciju animacije četvrtinom normalne brzine, odnosno jednom desetinom brzine.

Kada pregledate prijelaz gumba, DevTools će pokazati pojedinačna svojstva prijelaza: boju i boju pozadine.

Ovaj alat vam omogućuje da manipulirate svojom animacijom da vidite kako točno radi. Možete ga koristiti za riješite probleme na svojoj web stranici ako ima ikakvih problema.

Primjeri napredne animacije

Započnite zamjenom oznake unutar vašeg HTML-a označite sa sljedećim oznakama:


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>

Zatim zamijenite sve stilove u svom stil.css datoteka s ovim:

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

Svi elementi imaju kretati se u koracima animacija primijenjena na njih, koja mijenja položaj i boju pozadine. Osim toga, svaki okvir ima drugačiju animaciju za kontrolu broja koraka koje će poduzeti.

Dok treći okvir ravnomjerno klizi udesno, prva dva će se pomicati dva koraka dok svi ne stignu do kraja ekrana (pri čemu drugi okvir počinje prije prvog okvira).

Ako otvorite Animacije karticu u DevTools i osvježite stranicu, pronaći ćete sve informacije koje se odnose na ove animacije:

Postoji nekoliko elemenata koji svi animiraju tijekom istog razdoblja. U ovom scenariju, boja pozadine i položaj okvira animiraju se u isto vrijeme za sva tri okvira.

Još jedna stvar koju treba primijetiti su čvorovi na svakoj liniji animacije. Kada se animacija pojavi beskonačan broj puta, čvorovi pokazuju gdje svako ponavljanje počinje i završava u animaciji.

Prazni čvorovi su u biti ključni okviri u vašoj animaciji, dok puni, obojeni čvorovi predstavljaju početak i kraj animacije. Imat ćete čvorove tamne boje svaki put kada vaša animacija počne iznova.

Konačno, možete uređivati ​​animacije pomoću alata DevTools, baš kao što možete s bilo kojim CSS svojstvom. Sve promjene koje napravite pomoću korisničkog sučelja za animaciju prikazat će se u ugrađenim stilovima ispod Stilovi karticu, i obrnuto. To vam omogućuje da napravite promjene, testirate ih i kopirate u svoj stvarni projekt.

Značajka DevTools preglednika Google Chrome je sjajan alat za otklanjanje pogrešaka u vašem CSS-u, uključujući animacije. Omogućuje detaljan prikaz svakog prijelaza i animacije na vašoj stranici, tako da možete točno vidjeti što se događa na svakom koraku.

Kao web programer, trebali biste biti upoznati s funkcijom DevTools vašeg preglednika ili njezinim ekvivalentom.