В этом посте вы узнаете, как были созданы некоторые популярные анимации, найденные на CodePen. Во всех этих анимациях используются приемы производительности, обсуждаемые в других статьях этого раздела.
См. раздел Почему некоторые анимации работают медленно? чтобы изучить теорию, лежащую в основе этих рекомендаций, и руководство по анимации с практическими советами.
Анимация загрузки мастера
Просмотр анимации загрузки мастера на CodePen
Эта анимация загрузки полностью создана с помощью CSS. Изображение и вся анимация были созданы с помощью CSS и HTML, без изображений или JavaScript. Чтобы понять, как он был создан и насколько хорошо он работает, вы можете использовать Chrome DevTools.
Проверьте анимацию с помощью Chrome DevTools.
При работающей анимации откройте вкладку «Производительность» в Chrome DevTools и запишите несколько секунд анимации. В сводке вы должны увидеть, что браузер не выполняет никаких операций макета или рисования при запуске этой анимации.
Чтобы узнать, как эта анимация была достигнута без использования макета и рисования, проверьте любой движущийся элемент в Chrome DevTools. Вы можете использовать панель «Анимация» для поиска различных анимированных элементов; щелчок по любому элементу выделит его в 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 DevTools, вы можете найти ключевые кадры, прокрутив панель стилей вниз. Там вы обнаружите, что анимация создается с помощью 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 DevTools.
Проверьте анимацию с помощью Firefox DevTools.
При запущенной анимации откройте вкладку «Производительность» в 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 DevTools. Затем вы увидите визуализацию используемых анимаций и анимируемых свойств.
Сам белый круг создается и анимируется с помощью псевдоэлемента ::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 DevTools и выберите один из элементов с классом 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 DevTools и записав производительность во время ее работы. После начальной загрузки анимация не запускает Layout или Paint и работает плавно.
Заключение
Из этих примеров вы можете увидеть, как анимация нескольких свойств с использованием высокопроизводительных методов может создать очень классную анимацию. Выбрав по умолчанию методы повышения производительности, описанные в руководстве по анимации, вы можете потратить свое время на создание желаемого эффекта, не беспокоясь о замедлении страницы.