Анимации — мощное дополнение к CSS, но их текстовая форма может затруднить работу с ними. Инструменты разработчика Chrome в помощь!

Правильно выполненная CSS-анимация может поднять ваш сайт на новый уровень. Но создание этих анимаций может оказаться затруднительным без инструментов, обеспечивающих точный контроль над ними. Что, если бы существовал способ точно увидеть, что происходит на каждом этапе вашей анимации?

Функция DevTools как в Google Chrome, так и в Firefox позволяет проверять вашу анимацию. Узнайте, как использовать эту функцию для улучшения собственных анимаций и реконструировать любимые анимации в Интернете.

DevTools Chrome — отличный способ отладить все аспекты вашего CSS, и многое другое. Начните с этого простого примера, чтобы понять, как его можно использовать для проверки анимации.

Код для этих примеров доступен в репозиторий GitHub.

Определите анимацию с помощью HTML и CSS

Следующий HTML отображает страницу с двумя элементами: и. Страница также импортирует файл CSS с именем стиль.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>

Чтобы стилизовать оба элемента, создайте стиль.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 покажет отдельные свойства перехода: цвет и цвет фона.

Этот инструмент позволяет вам манипулировать анимацией, чтобы точно увидеть, как она работает. Вы можете использовать его, чтобы устранить неполадки вашего сайта если есть какие-либо проблемы.

Расширенные примеры анимации

Начните с замены разметки в вашем 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>

Затем замените все стили в вашем стиль.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 вашего браузера или ее эквивалентом.