Различия между CSS-анимацией и CSS-переходами. Что выбрать? Часть 2

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

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

Примеры CSS-переходов

• Пример счетчика пробела

В приведенном ниже примере количество нажатий пробела пользователем «записывается», благодаря комбинации CSS и JavaScript. Число вернется к 0, когда пользователь нажмет кнопку «Restart».

• Пример кнопки

При наведении курсора на элемент ниже стрелка становится прямоугольником, поэтому текст «Let’s Go!» становится похож на кнопку. 

Что делать, если CSS-переход не работает?

Если вы создали переход, но он не работает должным образом, вы можете попытаться это исправить с помощью советов из списка ниже:

1. Для свойства перехода установлено значение none

Свойство transition-property указывает имя свойства CSS, к которому применяется переход. Это свойство может быть определено ключевым словом «all».

«All» указывает на то, что все свойства должны быть преобразованы. Однако, если для свойства установлено значение «none», то никакое свойство не будет передано.

2. Transition-duration не определена, либо равна нулю или имеет отрицательное значение

Свойство transition-duration указывает продолжительность перехода. Может быть установлено любое положительное значение. Если свойство не определено, то значение будет считаться нулем секунд. 

Элемент по-прежнему будет переходить из одного состояния в другое, но изменение будет мгновенным — анимации не будет. Отрицательное значение делает объявление недействительным, поэтому предполагается, что свойство не определено. 

Когда лучше использовать CSS-переход вместо CSS-анимации?

Ниже рассмотрим идеальные варианты использования переходов вместо анимации:

• Создание простых движений от и до;
• Создание эффекта только тогда, когда пользователь взаимодействует с элементом при наведении на него курсора или щелчка;
• При использовании JavaScript;
• При разработке кнопок для изменения цвета или размера при наведении курсора пользователем.

CSS-анимация

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

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

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

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

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

Свойства CSS-анимации

Чтобы создать переход, вы можете использовать сокращенное свойство анимации или комбинацию нижеприведенных подсвойств. Вам потребуются только свойство animation-name и animation-duration. Если другие свойства не указаны, для них будут установлены значения по умолчанию:

• animation-name: указывает тип анимации;
• animation-duration: указывает продолжительность последовательности анимации;
• animation-timing-function: устанавливает темп анимации;
• animation-delay:  указывает, когда начинается анимация. Можно использовать миллисекунды или секунды, а также положительные или отрицательные значения;
• animation-direction: определяет направление анимации;
• animation-fill-mode: указывает, применяются ли стили анимации до или после воспроизведения;
• animation-iteration-count: указывает, сколько раз будет воспроизводиться анимация;
• animation-play-state: используется для приостановки и возобновления последовательности анимации.

Цикл CSS-анимации 

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

Вы можете сделать так, чтобы она повторялась бесконечное количество раз с помощью свойства animation-iteration-count, которое позволяет вам установить значение в количестве секунд или в бесконечности.

Также есть способ создать цикл перехода CSS с помощью события transitionEnd. Однако проще всего при создании анимации добавлять цикл.

Пример CSS-анимации

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

Когда лучше использовать CSS-анимацию вместо CSS-перехода? 

Ниже рассмотрим идеальные варианты использования анимации вместо переходов: 

• Создание более сложных серий движений;
• При необходимости создать эффект сразу при запуске страницы; 
• Только при использовании CSS без JavaScript;
• При разработке наложений инструкций для пользовательского интерфейса.

^{Источник: hubspot.com}