Transitions vs Animations

При анимации в сети, ты используешь transition (переходы) или animation (анимации)? Бывают случаи, когда ты предпочитаешь выбрать один вместо другого. Давай поговорим о различиях.

Что такое Transitions?

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

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

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

Когда использовать

Если ты хочешь изменить элемент плавно с одного состояния в другой, лучше использовать transition. Как правило небольшие изменения могут быть обработаны с помощью transitions (переходов) и временных функций, а также использованы для настройки способа самого перехода.

Переход будет работать хорошо, когда кто-то навет мышку/нажмет на кнопку:

Или при добавлении элемента на страницу:

Что такое Animations?

В CSS анимации являются более мощными альтернативами по сравнению с transitions (переходами). Вместо того, чтобы полагаться на переход от одного начального состояния к конечному, анимации могут переходить промежуточными этапами, на столько на сколько хочется, и дает больше контроля над порядком изменения состояния анимации.

Если transition устанавливает переход  только от А до B, то animation может и A, и B, и C и даже D. Или любое другое количество этапов по мере необходимости. 

Animations добивается этого с помощью набора ключевых кадров (keyframes). Если переход может быть определен одной строкой в классе, то анимация работает посредством ссылки на набор ключевых кадров(@keyframes), которые описаны отдельно в CSS.

Когда использовать

Если необходимо чтобы анимация выполнялась при загрузке страницы или нужна более сложная, чем от А состояния к B состоянию, то в таком случае более подходящим является CSS анимация.

Например: нужна анимация на странице, которая начинает работать по прошествии определенного периода времени, как этот эффект мигания персонажа Baymax:

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

Иногда это не очевидно

В недавним посте начал с анимации, но затем стал использовать transitions.

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

По мере использования JavaScript, становилось понятно что с выбором ошибся и transitions лучше подходит. Когда JavaScript изменяет положение стрелки, CSS transition обрабатывает изменение (из состояния А в состояние В) более элегантно, чем при помощи анимации.

Чтобы получить больше информации кликни по уроку CSS часы.

Заключение

Transition для создания плавного перехода от одного состояния к другому, а animation для более сложной последовательности серии передвижений.

Как правило, transition легче создавать и управлять им, а также использовать у большинства случаев. Если нужно больше контроля над анимированным элементом через серию шагов (этапов) или если при анимации необходимо начать после загрузки, то анимация с ключевыми кадрами(@keyframes) вполне более предпочтительна.

Make sure to follow on Twitter for all the latest updates!