Animatsioonid on võimas lisa CSS-ile, kuid nende tekstivorm võib muuta nendega töötamise ebamugavaks. Chrome'i DevTools appi!
Õigesti tehtud CSS-animatsioonid võivad tõsta teie saidi teisele tasemele. Kuid nende animatsioonide loomine võib olla keeruline ilma nende üle täpset kontrolli pakkuvate tööriistadeta. Mis siis, kui oleks võimalus näha täpselt, mis teie animatsiooni igal etapil toimub?
Nii Google Chrome'i kui ka Firefoxi DevToolsi funktsioon on varustatud võimalusega kontrollida teie animatsioone. Siit saate teada, kuidas seda funktsiooni kasutada oma animatsioonide täiustamiseks ja lemmikanimatsioonide pöördprojekteerimiseks veebis.
Chrome'i DevTools on suurepärane viis siluda oma CSS-i kõiki aspekte, ja peale selle. Alustage selle lihtsa näitega, et mõista, kuidas saate seda animatsioonide kontrollimiseks kasutada.
Nende näidete kood on saadaval keeles GitHubi hoidla.
Animatsioonide määratlemine HTML-i ja CSS-iga
Järgmine HTML renderdab lehe kahe elemendiga: a ja a. Leht impordib ka CSS-faili nimega stiil.css:
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>
Mõlema elemendi stiiliks looge a stiil.css fail HTML-iga samasse kausta ja lisage järgmine:
#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;
}
}
Need stiilid loovad kaks komponenti:
- Lihtne kast, mis lehe laadimisel pöörleb ja muudab värvi.
- Nupp, mis muudab selle taustavärvi, kui hõljutate kursorit selle kohal.
Pange tähele, et punane kast animeerub kasutades CSS @keyframe direktiiv, samas kui nupp kasutab üleminekut. See võimaldab teil brauseri DevToolsi abil neid kahte lähenemisviisi võrrelda.
Et pääseda juurde Animatsioonid Chrome DevToolsi vahekaart:
- Kontekstimenüü kuvamiseks paremklõpsake oma lehel.
- Klõpsake Kontrollige.
- Klõpsake paremas ülanurgas kolmekordset punkti.
- Navigeerige Rohkem tööriistu > Animatsioonid.
See avab alumises jaotises animatsioonisahtli.
Siin kuvatakse kõik teie lehel esinevad animatsioonid. Kui värskendate oma lehte ja hõljutate kursorit nupul, kuvatakse animatsioonid vahekaardil Animatsioonid.
Tõeline jõud tuleb siis, kui klõpsate ühel neist animatsioonidest. Näiteks kui klõpsate kasti animatsioonil, näete, et brauser esitab võtmekaadrid järgmiselt:
DevTools kuvab kõik valitud elemendiga seotud animatsioonid. Kuna punase kasti jaoks on määratletud ainult üks animatsioon –pööraJaChangeColor- näete lihtsalt selle üksikasju.
Animatsiooni palju kiiremaks muutmiseks võite joont lohistada vasakule või animatsiooni aeglustamiseks paremale. Samuti saate animatsiooni teatud punktides peatada, lülitades pausi ja esituse ikoone. Ülaosas olevad protsendid võimaldavad teil animatsiooni esitada vastavalt veerandi normaalkiirusest ja kümnendiku kiirusest.
Nupuülemineku kontrollimisel näitab DevTools ülemineku individuaalseid omadusi: värvi ja taustavärvi.
See tööriist võimaldab teil animatsiooniga manipuleerida, et näha, kuidas see täpselt töötab. Saate seda kasutada oma veebisaidi tõrkeotsing kui on mingeid probleeme.
Täpsemad animatsiooninäited
Alustuseks asendage märgistus oma HTML-is sildi järgmise märgistusega:
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>
Seejärel asendage kõik oma stiilid stiil.css faili sellega:
.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;
}
}
Kõik elementidel on samm-sammult neile rakendatud animatsioon, mis muudab asukohta ja taustavärvi. Lisaks sellele on igal kastil erinev animatsioon, mis kontrollib tehtavate sammude arvu.
Kui kolmas kast libiseb pidevalt paremale, liiguvad esimesed kaks sammu korraga, kuni nad kõik jõuavad ekraani lõppu (teine kast algab enne esimest kasti).
Kui avate Animatsioonid vahekaarti DevToolsis ja värskendage lehte, leiate kogu nende animatsioonidega seotud teabe:
Seal on mitu elementi, mis kõik animeerivad sama perioodi jooksul. Selle stsenaariumi korral animeeritakse kõigi kolme kasti taustavärv ja kasti asukoht korraga.
Veel üks asi, mida tuleb tähele panna, on sõlmed igal animatsioonireal. Kui animatsioon toimub lõpmatu arv kordi, näitavad sõlmed, kus iga kordus animatsioonis algab ja lõpeb.
Tühjad sõlmed on sisuliselt teie animatsiooni võtmekaadrid, samas kui kindlad värvilised sõlmed tähistavad animatsiooni algust ja lõppu. Teil on tumedad sõlmed iga kord, kui animatsioon algab otsast.
Lõpuks saate animatsioone redigeerida DevToolsi abil, nagu saate teha mis tahes CSS-i atribuudiga. Kõik muudatused, mida teete animatsiooni kasutajaliidese abil, kuvatakse jaotise sisestes stiilides Stiilid vahekaarti ja vastupidi. See võimaldab teil teha muudatusi, neid katsetada ja kopeerida oma tegelikku projekti.
Google Chrome'i funktsioon DevTools on suurepärane tööriist CSS-i, sealhulgas animatsioonide silumiseks. See annab üksikasjaliku ülevaate igast üleminekust ja animatsioonist teie lehel, et saaksite igal sammul täpselt näha, mis toimub.
Veebiarendajana peaksite olema tuttav oma brauseri funktsiooniga DevTools või selle samaväärsega.
