Анимациите са мощно допълнение към CSS, но тяхната текстова форма може да ги направи неудобни за работа. Chrome DevTools на помощ!

CSS анимациите, направени правилно, могат да издигнат вашия сайт на друго ниво. Но създаването на тези анимации може да бъде трудно без инструменти, които осигуряват фин контрол върху тях. Ами ако имаше начин да видите точно какво се случва на всяка стъпка от вашата анимация?

Функцията DevTools както на Google Chrome, така и на Firefox идва с възможност за проверка на вашите анимации. Научете как да използвате тази функция, за да подобрите собствените си анимации и да направите обратно инженерство на любимите си анимации в мрежата.

DevTools на Chrome е чудесен начин за отстраняване на грешки във всички аспекти на вашия CSS, и още повече. Започнете с този прост пример, за да разберете как можете да го използвате за проверка на анимации.

Кодът за тези примери е достъпен в хранилище на GitHub.

Дефинирайте анимации с HTML и CSS

Следният HTML изобразява страница с два елемента: a и а. Страницата също импортира CSS файл с име style.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>

За да стилизирате и двата елемента, създайте a style.css файл в същата папка като 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;
 }
}

Тези стилове създават два компонента:

  • Проста кутия, която се върти и променя цвета си, когато страницата се зареди.
  • Бутон, който променя цвета на фона си, когато задържите курсора на мишката върху него.

Имайте предвид, че червеното поле анимира с помощта на CSS директива @keyframe, докато бутонът използва преход. Това ви позволява да сравните двата подхода с помощта на DevTools на браузъра.

За достъп до Анимации раздел в Chrome DevTools:

  1. Щракнете с десния бутон върху вашата страница, за да изведете контекстното меню.
  2. Кликнете Инспектирайте.
  3. Кликнете върху тройните точки в горния десен ъгъл.
  4. Навигирайте до Още инструменти > Анимации.

Това ще отвори чекмеджето за анимация в долната секция.

Всички анимации, които се появяват на вашата страница, ще се показват тук. Ако опресните страницата си и задържите курсора на мишката върху бутона, анимациите ще се покажат под раздела за анимации.

Истинската сила идва, когато щракнете върху една от тези анимации. Например, ако щракнете върху анимацията на полето, ще видите, че браузърът представя ключовите кадри, както следва:

DevTools показва всички анимации, свързани с избрания от вас елемент. Тъй като има само една дефинирана анимация за червената кутия—rotateAndChangeColor— просто ще видите подробностите му.

Можете да плъзнете линията наляво, за да направите анимацията много по-бърза, или да я плъзнете надясно, за да забавите анимацията. Можете също така да поставите на пауза анимацията в определени моменти, като превключите иконите за пауза и възпроизвеждане. Процентите в горната част ви позволяват да възпроизвеждате анимацията съответно с една четвърт от нормалната й скорост и една десета от нейната скорост.

Когато инспектирате прехода на бутона, DevTools ще покаже отделните свойства на прехода: цвета и цвета на фона.

Този инструмент ви позволява да манипулирате вашата анимация, за да видите как точно работи. Можете да го използвате за отстранете проблема с уебсайта си ако има някакви проблеми.

Примери за напреднали анимации

Започнете, като замените маркирането във вашия HTML етикет със следното маркиране:


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>

След това сменете всички стилове във вашия style.css файл с това:

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

Всички елементи имат движение в стъпки анимация, приложена към тях, която променя позицията и цвета на фона. В допълнение към това, всяко поле има различна анимация, за да контролира броя на стъпките, които ще предприеме.

Докато третото поле се плъзга стабилно надясно, първите две ще се движат две стъпки наведнъж, докато всички достигнат края на екрана (като второто поле започва преди първото).

Ако отворите Анимации раздела в DevTools и опреснете страницата, ще намерите цялата информация, свързана с тези анимации:

Има няколко елемента, които всички оживяват през един и същи период. В този сценарий цветът на фона и позицията на кутията се анимират едновременно и за трите кутии.

Друго нещо, което трябва да се отбележи, са възлите на всяка анимационна линия. Когато една анимация се появи безкраен брой пъти, възлите показват къде започва и завършва всяко повторение в анимацията.

Празните възли са по същество ключовите кадри във вашата анимация, докато плътните, оцветени представляват началото и края на анимацията. Ще имате тъмно оцветени възли всеки път, когато анимацията ви започне отначало.

И накрая, можете да редактирате анимациите с помощта на DevTools, точно както можете с всяко CSS свойство. Всички промени, които правите с помощта на потребителския интерфейс за анимация, ще се показват във вградените стилове под Стилове раздел и обратно. Това ви позволява да правите промени, да ги тествате и да ги копирате в действителния си проект.

Функцията DevTools на Google Chrome е страхотен инструмент за отстраняване на грешки във вашия CSS, включително анимации. Той предоставя подробен изглед на всеки преход и анимация на вашата страница, така че можете да видите точно какво се случва на всяка стъпка.

Като уеб разработчик трябва да сте запознати с функцията DevTools на вашия браузър или неин еквивалент.