Animacijos yra galingas CSS priedas, tačiau dėl jų teksto gali būti nepatogu dirbti. Chrome DevTools į pagalbą!

Tinkamai atliktos CSS animacijos gali pakelti jūsų svetainę į kitą lygį. Tačiau kurti šias animacijas gali būti sudėtinga be įrankių, kurie puikiai jas valdo. O kas, jei būtų būdas tiksliai pamatyti, kas vyksta kiekviename jūsų animacijos etape?

„Google Chrome“ ir „Firefox“ „DevTools“ funkcija suteikia galimybę peržiūrėti animacijas. Sužinokite, kaip naudoti šią funkciją, kad patobulintumėte savo animacijas ir pakeistumėte mėgstamas animacijas žiniatinklyje.

Chrome DevTools yra puikus būdas derinti visus savo CSS aspektus, ir dar daugiau. Pradėkite nuo šio paprasto pavyzdžio, kad suprastumėte, kaip galite jį naudoti norėdami patikrinti animacijas.

Šių pavyzdžių kodas pateikiamas „GitHub“ saugykla.

Apibrėžkite animacijas naudodami HTML ir CSS

Šis HTML atvaizduoja puslapį su dviem elementais: a ir a. Puslapis taip pat importuoja CSS failą pavadinimu stilius.css:

html>
<htmllang="en">
<head>





instagram viewer



<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>

Norėdami stiliuoti abu elementus, sukurkite a stilius.css failą tame pačiame aplanke kaip ir HTML ir pridėkite:

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

Šie stiliai sukuria du komponentus:

  • Paprastas langelis, kuris sukasi ir keičia spalvą įkeliant puslapį.
  • Mygtukas, kuris pakeičia fono spalvą, kai užvedate pelės žymeklį virš jo.

Atminkite, kad raudonas laukelis animuojamas naudojant CSS @keyframe direktyva, o mygtukas naudoja perėjimą. Tai leidžia palyginti du metodus naudojant naršyklės DevTools.

Norėdami pasiekti Animacijos skirtukas „Chrome DevTools“:

  1. Dešiniuoju pelės mygtuku spustelėkite savo puslapį, kad būtų parodytas kontekstinis meniu.
  2. Spustelėkite Apžiūrėti.
  3. Spustelėkite trigubus taškus viršutiniame dešiniajame kampe.
  4. Eikite į Daugiau įrankių > Animacijos.

Tai atidarys animacijos stalčių apatinėje dalyje.

Čia bus rodomos visos jūsų puslapyje esančios animacijos. Jei atnaujinsite puslapį ir užveskite pelės žymeklį ant mygtuko, animacijos bus rodomos animacijų skirtuke.

Tikroji galia atsiranda spustelėjus vieną iš šių animacijų. Pavyzdžiui, jei spustelėsite laukelio animaciją, pamatysite, kad naršyklė pateikia pagrindinius kadrus taip:

DevTools rodo visas animacijas, susijusias su pasirinktu elementu. Kadangi raudonam langeliui nustatyta tik viena animacija –rotateAndChangeColor– pamatysite tik jo detales.

Galite vilkti liniją į kairę, kad animacija būtų daug greitesnė, arba vilkite ją į dešinę, kad sulėtintumėte animaciją. Taip pat galite pristabdyti animaciją tam tikruose taškuose perjungdami pristabdymo ir paleidimo piktogramas. Viršuje esantys procentai leidžia leisti animaciją atitinkamai ketvirtadaliu įprasto greičio ir viena dešimtadaliu greičio.

Kai tikrinate mygtuko perėjimą, DevTools parodys atskiras perėjimo savybes: spalvą ir fono spalvą.

Šis įrankis leidžia manipuliuoti animacija, kad tiksliai pamatytumėte, kaip ji veikia. Galite jį naudoti pašalinti triktis jūsų svetainėje jei yra kokių nors problemų.

Išplėstinės animacijos pavyzdžiai

Pradėkite pakeisdami žymėjimą savo HTML žyma su tokiu žymėjimu:


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>

Tada pakeiskite visus savo stilius stilius.css failą su šiuo:

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

Visi elementai turi judėjimas žingsniais jiems pritaikyta animacija, kuri perkelia padėtį ir fono spalvą. Be to, kiekvienas langelis turi skirtingą animaciją, leidžiančią valdyti veiksmų skaičių.

Nors trečiasis langelis tolygiai slenka į dešinę, pirmieji du judės po du žingsnius, kol visi pasieks ekrano pabaigą (antrasis langelis prasidės prieš pirmąjį langelį).

Jei atidarysite Animacijos DevTools skirtuką ir atnaujinkite puslapį, rasite visą informaciją, susijusią su šiomis animacijomis:

Yra keli elementai, kurie visi gyvuoja per tą patį laikotarpį. Pagal šį scenarijų visų trijų laukelių fono spalva ir laukelio padėtis animuojasi tuo pačiu metu.

Kitas dalykas, į kurį reikia atkreipti dėmesį, yra kiekvienos animacijos eilutės mazgai. Kai animacija kartojama be galo daug kartų, mazgai rodo, kur prasideda ir baigiasi kiekvienas kartojimas animacijoje.

Tušti mazgai iš esmės yra pagrindiniai jūsų animacijos kadrai, o vientisi, spalvoti, reiškia animacijos pradžią ir pabaigą. Kiekvieną kartą, kai animacija prasidės iš naujo, turėsite tamsių spalvų mazgus.

Galiausiai galite redaguoti animacijas naudodami DevTools, kaip ir bet kurią CSS nuosavybę. Visi pakeitimai, kuriuos atliekate naudodami animacijos vartotojo sąsają, bus rodomi eilutiniuose stiliuose, esančiuose po Stiliai skirtuką ir atvirkščiai. Tai leidžia atlikti pakeitimus, juos išbandyti ir nukopijuoti į tikrąjį projektą.

„Google Chrome“ „DevTools“ funkcija yra puikus įrankis CSS, įskaitant animacijas, derinti. Jame pateikiamas išsamus kiekvieno perėjimo ir animacijos jūsų puslapyje vaizdas, todėl galite tiksliai matyti, kas vyksta kiekviename žingsnyje.

Kaip žiniatinklio kūrėjas turėtumėte būti susipažinę su savo naršyklės „DevTools“ funkcija arba jos ekvivalentu.