CSS и JavaScript-анимация

Вы можете анимировать с помощью CSS или JavaScript. Что следует использовать и почему?

Paul Lewis
X Homepage
Сэм Торогуд

Существует два основных способа создания анимации в Интернете: с помощью CSS и JavaScript. Какой из них вы выберете, зависит от других зависимостей вашего проекта и того, каких эффектов вы пытаетесь достичь.

Краткое содержание

  • Используйте CSS-анимацию для более простых «однократных» переходов, таких как переключение состояний элементов пользовательского интерфейса.
  • Используйте анимацию JavaScript, когда вам нужны сложные эффекты, такие как подпрыгивание, остановка, пауза, перемотка или замедление.
  • Если вы решили анимировать с помощью JavaScript, используйте API веб-анимации или современный фреймворк, с которым вам удобно работать.

Большинство базовых анимаций можно создать с помощью CSS или JavaScript, но количество усилий и времени различается (см. также CSS vs JavaScript Performance ). У каждого есть свои плюсы и минусы, но вот хорошие рекомендации:

  • Используйте CSS, когда у вас есть небольшие, автономные состояния для элементов пользовательского интерфейса. Переходы и анимации CSS идеально подходят для вывода навигационного меню сбоку или показа подсказки. Вы можете в конечном итоге использовать JavaScript для управления состояниями, но сами анимации будут в вашем CSS.
  • Используйте JavaScript, когда вам нужен значительный контроль над анимацией. API веб-анимации — это основанный на стандартах подход, доступный сегодня в большинстве современных браузеров. Он предоставляет реальные объекты, идеальные для сложных объектно-ориентированных приложений. JavaScript также полезен, когда вам нужно остановить, приостановить, замедлить или обратить вспять анимацию.
  • Используйте requestAnimationFrame напрямую, когда вы хотите вручную организовать всю сцену. Это продвинутый подход JavaScript, но он может быть полезен, если вы создаете игру или рисуете на холсте HTML.

В качестве альтернативы, если вы уже используете фреймворк JavaScript, включающий функциональность анимации, например, с помощью метода .animate() jQuery или TweenMax GreenSock , то вам может быть удобнее придерживаться его для своих анимаций.

Анимация с помощью CSS

Анимация с помощью CSS — это самый простой способ заставить что-то двигаться на экране. Этот подход описывается как декларативный , потому что вы указываете, что вы хотите, чтобы произошло.

Ниже приведен CSS-код, который перемещает элемент 100px по осям X и Y. Это делается с помощью перехода CSS, который настроен на 500ms . Когда добавляется класс move , значение transform изменяется и начинается переход.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Попробуй это

Помимо продолжительности перехода, есть параметры для смягчения , которое по сути является тем, как ощущается анимация. Для получения дополнительной информации о смягчении см. руководство Основы смягчения .

Если, как в приведенном выше фрагменте, вы создаете отдельные классы CSS для управления анимацией, вы можете использовать JavaScript для включения и выключения каждой анимации:

box.classList.add('move');

Это обеспечивает хороший баланс для ваших приложений. Вы можете сосредоточиться на управлении состоянием с помощью JavaScript и просто задать соответствующие классы для целевых элементов, предоставив браузеру управлять анимацией. Если вы пойдете по этому пути, вы сможете прослушивать события transitionend для элемента, но только если вы сможете отказаться от поддержки старых версий Internet Explorer; версия 10 была первой версией, которая поддерживала эти события. Все остальные браузеры поддерживают это событие уже некоторое время.

JavaScript, необходимый для прослушивания окончания перехода, выглядит следующим образом:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Помимо использования CSS-переходов, вы также можете использовать CSS-анимацию, которая позволяет вам иметь гораздо больше контроля над отдельными ключевыми кадрами анимации, ее длительностью и итерациями.

Например, вы можете анимировать поле таким же образом с переходами, но анимировать его без какого-либо взаимодействия с пользователем, например, щелчков, и с бесконечными повторениями. Вы также можете изменять несколько свойств одновременно.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Попробуй это

С помощью CSS-анимации вы определяете саму анимацию независимо от целевого элемента и используете свойство animation-name для выбора необходимой анимации.

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

Анимация с помощью JavaScript и API веб-анимации

Создание анимаций с помощью JavaScript, по сравнению с написанием переходов или анимаций CSS, является более сложным, но обычно предоставляет разработчикам значительно больше возможностей. Вы можете использовать API веб-анимации для анимации определенных свойств CSS или создания составных объектов эффектов.

Анимации JavaScript обязательны , поскольку вы пишете их в строке как часть своего кода. Вы также можете инкапсулировать их внутри других объектов. Ниже приведен код JavaScript, который вам нужно написать для воссоздания перехода CSS, описанного ранее:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

По умолчанию веб-анимации изменяют только представление элемента. Если вы хотите, чтобы ваш объект оставался в том месте, куда он был перемещен, вам следует изменить его базовые стили после завершения анимации, как в нашем примере.

Попробуй это

Web Animations API — относительно новый стандарт от W3C. Он изначально поддерживается большинством современных браузеров. Для неподдерживающих современных браузеров доступен полифил .

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