Анимације су моћан додатак ЦСС-у, али њихов текстуални облик може да их учини незгодним за рад. Цхроме-ови ДевТоолс у помоћ!

ЦСС анимације, правилно урађене, могу подићи вашу веб локацију на други ниво. Али креирање ових анимација може бити тешко без алата који пружају фину контролу над њима. Шта ако постоји начин да се тачно види шта се дешава на сваком кораку ваше анимације?

Функција ДевТоолс и Гоогле Цхроме-а и Фирефок-а долази са могућношћу прегледа ваших анимација. Научите како да користите ову функцију за побољшање сопствених анимација и обрнути инжењеринг својих омиљених анимација на вебу.

Цхроме-ови ДевТоолс су одличан начин да отклоните грешке у свим аспектима вашег ЦСС-а, и више од тога. Почните са овим једноставним примером да бисте разумели како га можете користити за проверу анимација.

Код за ове примере је доступан у ГитХуб спремиште.

Дефинишите анимације помоћу ХТМЛ-а и ЦСС-а

Следећи ХТМЛ приказује страницу са два елемента: а и а. Страница такође увози ЦСС датотеку под називом стиле.цсс:

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>

Да бисте стилизовали оба елемента, креирајте а стиле.цсс датотеку у истој фасцикли као и ХТМЛ и додајте следеће:

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

Ови стилови стварају две компоненте:

  • Једноставна кутија која се окреће и мења боју када се страница учита.
  • Дугме које мења боју позадине када пређете мишем преко њега.

Имајте на уму да црвена кутија анимира помоћу ЦСС @кеифраме директива, док дугме користи прелаз. Ово вам омогућава да упоредите два приступа користећи ДевТоолс претраживача.

Да бисте приступили Анимације картица у Цхроме ДевТоолс:

  1. Кликните десним тастером миша на своју страницу да бисте отворили контекстни мени.
  2. Кликните Инспецт.
  3. Кликните на троструке тачке у горњем десном углу.
  4. Иди на Још алата > Анимације.

Ово ће отворити фиоку за анимације у доњем делу.

Све анимације које се појаве на вашој страници ће се појавити овде. Ако освежите страницу и задржите показивач миша на дугмету, анимације ће се појавити испод картице анимације.

Права снага долази када кликнете на једну од ових анимација. На пример, ако кликнете на анимацију оквира, видећете да прегледач приказује кључне кадрове на следећи начин:

ДевТоолс приказују све анимације које се односе на елемент који изаберете. Пошто постоји само једна анимација дефинисана за црвену кутију -ротатеАндЦхангеЦолор– видећете само његове детаље.

Можете да превучете линију улево да бисте анимацију учинили много бржом или је превуците удесно да бисте успорили анимацију. Такође можете паузирати анимацију у одређеним тачкама тако што ћете укључити иконе за паузу и репродукцију. Проценти на врху вам омогућавају да репродукујете анимацију са четвртином њене нормалне брзине и једном десетином њене брзине.

Када прегледате прелаз дугмета, ДевТоолс ће показати појединачна својства прелаза: боју и боју позадине.

Овај алат вам омогућава да манипулишете својом анимацијом да бисте видели како тачно функционише. Можете га користити за решите проблеме на вашој веб локацији ако има проблема.

Напредни примери анимације

Почните тако што ћете заменити ознаке унутар вашег ХТМЛ-а таг са следећим ознакама:


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>

Затим замените све стилове у свом стиле.цсс фајл са овим:

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

Све елементи имају покрет у корацима на њих примењена анимација која мења позицију и боју позадине. Поред тога, свака кутија има другачију анимацију за контролу броја корака које ће предузети.

Док трећа кутија стално клизи удесно, прва два ће се кретати по два корака док сви не стигну до краја екрана (с тим да други оквир почиње пре првог поља).

Ако отворите Анимације картицу у ДевТоолс и освежите страницу, наћи ћете све информације у вези са овим анимацијама:

Постоји неколико елемената који се анимирају у истом периоду. У овом сценарију, боја позадине и позиција кутије анимирају се истовремено за сва три поља.

Још једна ствар коју треба напоменути су чворови на свакој линији анимације. Када се анимација појави бесконачан број пута, чворови показују где свако понављање почиње и где се завршава у анимацији.

Празни чворови су у суштини кључни кадрови у вашој анимацији, док чврсти, обојени представљају почетак и крај анимације. Имаћете тамне чворове сваки пут када ваша анимација почне изнова.

Коначно, можете уређивати анимације користећи ДевТоолс, баш као што можете са било којим ЦСС својством. Све промене које направите помоћу корисничког интерфејса анимације ће се појавити у уграђеним стиловима испод Стилови таб, и обрнуто. Ово вам омогућава да уносите измене, тестирате их и копирате у свој стварни пројекат.

Функција ДевТоолс у Гоогле Цхроме-у је одлична алатка за отклањање грешака у вашем ЦСС-у, укључујући анимације. Пружа детаљан преглед сваког прелаза и анимације на вашој страници, тако да можете тачно да видите шта се дешава на сваком кораку.

Као веб програмер, требало би да сте упознати са функцијом ДевТоолс вашег претраживача или њеним еквивалентом.