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

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

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

CSS-переход против CSS-анимации

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

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

С помощью этих двух эффектов вы можете следующее: 

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

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

CSS-переходы:

• Переходы могут перемещаться только от начального к конечному состоянию — без промежуточных шагов;
• Их можно запустить только один раз;
• Им нужен триггер для запуска, например, наведение мыши;
• Их легче использовать вместе с JavaScript;
• Их лучше всего использовать для создания простого перехода из одного состояния в другое.

CSS-анимация:

• Анимация может перемещаться от начального к конечному состоянию с промежуточными шагами между ними;
• Ее можно бесконечно зацикливать, благодаря свойству animation-iteration-count;
• Ее можно запускать автоматически;
• Ее сложнее использовать вместе с JavaScript;
• Она лучше всего подходит для создания сложной серии движений.

Вот простой способ визуализировать основные различия между переходами и анимацией:

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

CSS-переходы

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

Вы можете настроить элемент на изменение цвета, масштаба или положения. Вы также можете вращать, наклонять и перемещать объекты. Если вы хотите более сложный переход, можно изменить несколько свойств одновременно. Например, если вы хотите, чтобы ваш переход менял цвет и ширину фона, вам необходимо указать записи для свойств background-color и width. 

Свойства CSS-переходов 

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

• transition-property: указывает имя свойства CSS, для которого предназначен эффект перехода. Так, например, если для этого свойства установлено значение «ширина», то при наведении курсора на элемент его ширина изменится;
• transition-duration: указывает продолжительность времени, которое требуется для завершения эффекта перехода;
• transition-timing-function: устанавливает темп эффекта перехода;
• transition-delay: указывает, когда начинается эффект перехода.

CSS-переходы и JavaScript

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

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

Давайте рассмотрим несколько примеров. 

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

• Пример растягивания при наведении

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

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