Animaatiot ovat tehokas lisä CSS: ään, mutta niiden tekstimuoto voi tehdä niistä hankala työskennellä. Chromen DevTools apuun!

Oikein tehtynä CSS-animaatiot voivat nostaa sivustosi uudelle tasolle. Mutta näiden animaatioiden luominen voi olla hankalaa ilman työkaluja, jotka mahdollistavat niiden tarkan hallinnan. Entä jos olisi tapa nähdä tarkasti, mitä animaatiosi jokaisessa vaiheessa tapahtuu?

Sekä Google Chromen että Firefoxin DevTools-ominaisuus sisältää mahdollisuuden tarkastella animaatioita. Opi käyttämään tätä ominaisuutta omien animaatioidesi parantamiseen ja suosikkianimaatioidesi kääntämiseen verkossa.

Chromen DevTools on loistava tapa virheenkorjaus CSS: n kaikissa osissa, ja sen lisäksi. Aloita tästä yksinkertaisesta esimerkistä ymmärtääksesi, kuinka voit käyttää sitä animaatioiden tarkastamiseen.

Näiden esimerkkien koodi on saatavilla osoitteessa GitHub-arkisto.

Animaatioiden määrittäminen HTML: llä ja CSS: llä

Seuraava HTML renderöi sivun, jossa on kaksi elementtiä: a ja a. Sivu tuo myös CSS-tiedoston nimeltä tyyli.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>

Voit tyylittää molemmat elementit luomalla a tyyli.css tiedosto samaan kansioon kuin HTML ja lisää seuraava:

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

Nämä tyylit luovat kaksi osaa:

  • Yksinkertainen laatikko, joka pyörii ja vaihtaa väriä sivun latautuessa.
  • Painike, joka muuttaa taustavärinsä, kun viet hiiren sen päälle.

Huomaa, että punainen laatikko animoituu käyttämällä CSS @keyframe -ohje, kun taas painike käyttää siirtymää. Näin voit verrata kahta lähestymistapaa selaimen DevTools-työkalujen avulla.

Päästäksesi Animaatiot -välilehti Chrome DevToolsissa:

  1. Napsauta sivuasi hiiren kakkospainikkeella avataksesi kontekstivalikon.
  2. Klikkaus Tarkastaa.
  3. Napsauta kolmoispisteitä oikeassa yläkulmassa.
  4. Navigoida johonkin Lisää työkaluja > Animaatiot.

Tämä avaa animaatiolaatikon alaosassa.

Kaikki sivullasi esiintyvät animaatiot näkyvät täällä. Jos päivität sivusi ja viet hiiren painikkeen päälle, animaatiot näkyvät animaatiot-välilehden alla.

Todellinen voima tulee, kun napsautat jotakin näistä animaatioista. Jos esimerkiksi napsautat laatikon animaatiota, näet selaimen esittävän avainkehykset seuraavasti:

DevTools näyttää kaikki animaatiot, jotka liittyvät valitsemaasi elementtiin. Koska punaiselle laatikolle on määritetty vain yksi animaatio -rotateAndChangeColor– näet vain sen yksityiskohdat.

Voit nopeuttaa animaatiota vetämällä viivaa vasemmalle tai hidastaaksesi animaatiota vetämällä sitä oikealle. Voit myös keskeyttää animaation tietyissä kohdissa vaihtamalla tauko- ja toistokuvakkeita. Ylhäällä olevien prosenttiosuuksien avulla voit toistaa animaation neljänneksellä sen normaalista nopeudesta ja kymmenesosalla sen nopeudesta.

Kun tarkastelet painikkeen siirtymää, DevTools näyttää siirtymän yksittäiset ominaisuudet: värin ja taustavärin.

Tämän työkalun avulla voit muokata animaatiotasi nähdäksesi tarkalleen, miten se toimii. Voit käyttää sitä Web-sivustosi vianetsintä jos on ongelmia.

Esimerkkejä edistyneistä animaatioista

Aloita korvaamalla HTML-merkinnät tunniste seuraavalla merkinnällä:


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>

Vaihda sitten kaikki tyylisi tyyli.css tiedosto tällä:

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

Kaikki elementeillä on askeleet niihin kohdistettu animaatio, joka muuttaa sijaintia ja taustaväriä. Tämän lisäksi jokaisessa laatikossa on erilainen animaatio, joka ohjaa sen suorittamien vaiheiden määrää.

Kun kolmas laatikko liukuu tasaisesti oikealle, kaksi ensimmäistä liikkuvat kaksi askelta kerrallaan, kunnes ne kaikki saavuttavat näytön loppuun (toisen laatikon alkaessa ennen ensimmäistä laatikkoa).

Jos avaat Animaatiot -välilehti DevToolsissa ja päivitä sivu, löydät kaikki näihin animaatioihin liittyvät tiedot:

On olemassa useita elementtejä, jotka kaikki animoituvat saman ajanjakson aikana. Tässä skenaariossa taustaväri ja laatikon sijainti animoituvat samanaikaisesti kaikissa kolmessa laatikossa.

Toinen huomioitava asia on kunkin animaatiorivin solmut. Kun animaatio esiintyy äärettömän monta kertaa, solmut osoittavat, missä kukin toisto alkaa ja päättyy animaatiossa.

Tyhjät solmut ovat pääasiassa animaatiosi avainkehyksiä, kun taas kiinteät, värilliset solmut edustavat animaation alkua ja loppua. Sinulla on tummia solmuja aina, kun animaatio alkaa alusta.

Lopuksi voit muokata animaatioita DevToolsin avulla, aivan kuten minkä tahansa CSS-ominaisuuden kanssa. Kaikki animaatiokäyttöliittymän avulla tekemäsi muutokset näkyvät tekstin sisäisissä tyyleissä Tyylit välilehti ja päinvastoin. Näin voit tehdä muutoksia, testata niitä ja kopioida ne varsinaiseen projektiisi.

Google Chromen DevTools-ominaisuus on mahtava työkalu CSS-virheenkorjaukseen, mukaan lukien animaatiot. Se tarjoaa yksityiskohtaisen näkymän jokaisesta sivusi siirtymisestä ja animaatiosta, joten näet tarkalleen, mitä jokaisessa vaiheessa tapahtuu.

Verkkokehittäjänä sinun tulee tuntea selaimesi DevTools-toiminto tai vastaava.