В этой статье вы узнаете, как были созданы некоторые популярные анимации, найденные на CodePen. Все эти анимации используют методы повышения производительности, описанные в других статьях этого раздела.
См. раздел «Почему некоторые анимации работают медленно?» , чтобы узнать теорию, лежащую в основе этих рекомендаций, и « Руководство по анимациям» для получения практических советов.
Анимация загрузки мастера
Посмотреть анимацию загрузки мастера на 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);
}
}
В каждой из движущихся частей этой анимации используются схожие методы. В результате получается сложная, но плавная анимация.
Пульсирующий круг
Посмотреть Pulsating Circle на CodePen
Этот тип анимации иногда используется для привлечения внимания к чему-либо на странице. Чтобы понять, что такое анимация, можно использовать инструменты разработчика Firefox.
Проверьте анимацию с помощью инструментов разработчика Firefox.
Во время воспроизведения анимации откройте вкладку «Производительность» в инструментах разработчика Firefox и запишите несколько секунд анимации. Остановите запись; на диаграмме вы должны увидеть, что нет записей для параметра «Пересчитать стиль» . Теперь вы знаете, что эта анимация не вызывает пересчета стилей, а следовательно, и операций компоновки и отрисовки.
Оставаясь в инструментах разработчика Firefox, изучите круг, чтобы увидеть, как работает эта анимация. Элемент <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 3D Сфера
Посмотреть 3D-сферу на чистом CSS на 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 ; для их масштабирования и перемещения используется анимация с применением преобразования (transform). Это создает эффект пульсации.
.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 и записав видео с записью процесса. После первоначальной загрузки анимация не запускает процессы компоновки или отрисовки и работает плавно.
Заключение
На этих примерах видно, как анимация нескольких свойств с использованием высокопроизводительных методов может создавать очень крутые анимации. Используя по умолчанию высокопроизводительные методы, описанные в руководстве по анимации, вы можете потратить время на создание желаемого эффекта, меньше беспокоясь о замедлении работы страницы.