Основное различие между CSS-анимацией и переходами

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

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

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

Но сначала: как вы относитесь к этим эффектам? Есть две классификации. В мире дизайна они называются переходами и анимациями.

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

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

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

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

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

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

CSS переходы

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

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

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

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

Более простой переход CSS – ваш друг, если вы решите управлять более сложными аспектами с помощью JavaScript.

Пример перехода CSS

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

CSS анимации

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

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

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

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

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

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

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

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

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

Узнайте больше о том, что такое CSS-анимация и как ее можно использовать на своем сайте.

Источник записи: https://blog.hubspot.com