Примеры высокопроизводительной CSS-анимации

В этом посте вы узнаете, как были созданы некоторые популярные анимации, найденные на CodePen. Во всех этих анимациях используются приемы производительности, обсуждаемые в других статьях этого раздела.

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

Анимация загрузки мастера

Просмотр анимации загрузки мастера на CodePen

Эта анимация загрузки полностью создана с помощью CSS. Изображение и вся анимация были созданы с помощью CSS и HTML, без изображений или JavaScript. Чтобы понять, как он был создан и насколько хорошо он работает, вы можете использовать Chrome DevTools.

Проверьте анимацию с помощью Chrome DevTools.

При работающей анимации откройте вкладку «Производительность» в Chrome DevTools и запишите несколько секунд анимации. В сводке вы должны увидеть, что браузер не выполняет никаких операций макета или рисования при запуске этой анимации.

Резюме в DevTools
Сводная информация после профилирования анимации мастера.

Чтобы узнать, как эта анимация была достигнута без использования макета и рисования, проверьте любой движущийся элемент в Chrome DevTools. Вы можете использовать панель «Анимация» для поиска различных анимированных элементов; щелчок по любому элементу выделит его в DOM.

Панель «Анимации», показывающая различные части нашей анимации.
Просмотр и выбор элементов на панели анимации Chrome DevTools.

Например, выберите треугольник и наблюдайте, как коробка элемента трансформируется во время своего путешествия в воздух, вращается, а затем возвращается в исходное положение.

Видео, показывающее, как мы можем отслеживать путь треугольника в Chrome DevTools.

Выделив элемент, посмотрите на панель стилей. Там вы можете увидеть 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 Waterfall
Водопад инструментов разработчика Firefox.

Находясь в 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. Затем вы увидите визуализацию используемых анимаций и анимируемых свойств.

Выбрав псевдоэлемент ::before, мы можем увидеть, какие свойства анимируются.

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

Заключение

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