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

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

Paul Lewis

Sam Thorogood

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

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

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

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

• Используйте 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)';
});

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

Попробуйте это

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

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