В этой статье вы узнаете, как были созданы некоторые популярные анимации, найденные на CodePen. Во всех этих анимациях используются эффективные методы, описанные в других статьях этого раздела.
Чтобы узнать, почему некоторые анимации воспроизводятся медленно, прочитайте эту статью. Практические советы вы найдете в руководстве по анимации.
Анимация загрузки мастера
Посмотреть анимацию загрузки Wizard на CodePen
Эта анимация загрузки полностью создана с помощью CSS. Изображение и анимация созданы с помощью CSS и HTML, без использования изображений и JavaScript. Чтобы понять, как он был создан и насколько хорошо он работает, вы можете использовать инструменты разработчика Chrome.
Проверьте анимацию с помощью инструментов разработчика Chrome
Пока анимация воспроизводится, откройте вкладку "Производительность" в инструментах разработчика Chrome и запишите несколько секунд анимации. В сводке вы увидите, что браузер не выполняет никаких операций макета или отрисовки при запуске этой анимации.
Чтобы узнать, как была достигнута эта анимация без макета и отрисовки, проверьте любой из движущихся элементов в инструментах разработчика Chrome. На панели анимации можно найти различные анимированные элементы. Если нажать на любой из них, он будет выделен в DOM.
Например, выберите треугольник и посмотрите, как меняется его рамка, когда он взлетает, вращается и возвращается в исходное положение.
Не снимая выделения с элемента, посмотрите на панель "Стили". Там вы увидите код CSS, который рисует треугольник, и используемую анимацию.
Принцип работы
Треугольник создается с помощью псевдоэлемента ::after, который добавляет сгенерированный контент, и границ, которые задают форму.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
Анимация добавляется с помощью следующей строки CSS:
animation: path_triangle 10s ease-in-out infinite;
В инструментах разработчика Chrome прокрутите панель стилей вниз, чтобы найти ключевые кадры.
Вы увидите, что анимация создается с помощью transform, который меняет положение элемента и поворачивает его.
Свойство transform описано в руководстве по анимации. Оно не заставляет браузер выполнять операции макета или отрисовки, которые являются основными причинами медленной анимации.
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
Каждая из различных движущихся частей этой анимации использует схожие техники. В результате получается сложная анимация, которая воспроизводится без задержек.
Пульсирующий круг
Посмотреть пульсирующий круг на CodePen
Такая анимация иногда используется, чтобы привлечь внимание к какому-либо элементу на странице. Чтобы понять, как работает анимация, можно использовать инструменты разработчика Firefox.
Как проверить анимацию с помощью инструментов разработчика Firefox
Запустите анимацию, откройте вкладку Performance (Производительность) в Firefox DevTools и запишите несколько секунд анимации. Остановите запись. На каскадной диаграмме не должно быть записей Recalculate Style (Пересчитать стиль). Теперь вы знаете, что эта анимация не вызывает пересчет стилей, а значит, и операции макета и отрисовки.
Оставаясь в Firefox DevTools, проверьте круг, чтобы увидеть, как работает эта анимация.
Элемент <div> с классом pulsating-circle отмечает положение круга, но не рисует его.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Видимый круг и анимация создаются с помощью псевдоэлементов ::before и ::after.
Элемент ::before создает непрозрачное кольцо, которое выходит за пределы белого круга, используя анимацию pulse-ring, которая анимирует transform: scale и opacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Другой способ узнать, какие свойства анимируются, – выбрать панель Анимация в инструментах разработчика Firefox. Вы увидите визуализацию используемых анимаций и анимируемых свойств.
Сам белый круг создается и анимируется с помощью псевдоэлемента ::after.
Анимация pulse-dot использует transform: scale, чтобы увеличивать и уменьшать точку во время анимации.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Такую анимацию можно использовать в разных местах приложения. Важно, чтобы эти небольшие штрихи не влияли на общую производительность приложения.
Трехмерная сфера на чистом CSS
Посмотреть Pure CSS 3D Sphere на CodePen
Эта анимация кажется невероятно сложной, однако в ней используются техники, которые мы уже видели в предыдущих примерах. Сложность заключается в анимации большого количества элементов.
Откройте инструменты разработчика Chrome и выберите один из элементов с классом plane.
Сфера состоит из набора вращающихся плоскостей и спиц.
Эти плоскости и спицы находятся внутри контейнера <div>, и именно этот элемент вращается с помощью transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
Точки находятся внутри элементов plane и spoke. Для них используется анимация, которая масштабирует и перемещает их.
Это создает эффект пульсации.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
Работа над этой анимацией заключалась в том, чтобы правильно рассчитать время, чтобы создать эффект поворота и пульсации. Сами анимации довольно просты и используют методы, которые работают очень хорошо.
Вы можете посмотреть, как работает эта анимация, открыв инструменты разработчика Chrome и записав производительность во время ее работы. После начальной загрузки анимация не запускает макет или отрисовку и работает плавно.
Заключение
Из этих примеров видно, что, анимируя всего несколько свойств с помощью эффективных методов, можно создавать очень интересные анимации. Если вы будете использовать эффективные методы, описанные в руководстве по анимации, то сможете сосредоточиться на создании нужного эффекта и не беспокоиться о том, что страница будет работать медленно.