Как использовать CSS3 переходы и анимацию для выделения изменений в пользовательском интерфейсе

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

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

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

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

Переходы

Переходы и анимации используются для визуализировать изменения в состоянии HTML-элемента изменение одного или нескольких его свойств CSS.

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

Изменение CSS-свойств ссылки при наведении (или фокусе, или щелчке) является самой старой и простой формой переходов и существовало задолго до эры CSS3..

 цвет: оранжевый;  a: hover color: red;  a: focus color: blue;  a: посещал цвет: зеленый; 

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

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

1. У них всегда есть начало и конец.
2. Состояния между начальной и конечной точками неявно определяются браузером, мы не можем изменить это с помощью CSS.
3. Они требуют явный запуск, например, добавление нового псевдокласса с помощью CSS или нового класса с помощью jQuery.

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

Анимации

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

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

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

Наиболее важные вещи, которые вы должны знать об анимации CSS3:

1. они не требуют явного запуска, они могут начинаться при загрузке страницы или когда в браузере происходит другое событие DOM
2. они могут использоваться в случаях, когда используются переходы, например, когда добавляется или удаляется новый класс или псевдокласс (хотя это менее частый вариант использования)
3. они требуют от нас определить некоторые ключевые кадры (промежуточные состояния)
4. мы можем указать количество, частоту и стиль этих ключевых кадров

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

Эти новые классы анимированы с указанным @keyframes правила в файле CSS. Дополнительные классы удаляются с помощью jQuery, когда пользователь нажимает кнопку в следующий раз, и меню снова становится скрытым.

Свойства CSS и @keyframes В Правило

Для переходов мы можем использовать либо переход Сокращенное свойство или 4 отдельных свойства, связанных с переходом: переход-недвижимость, Продолжительность перехода, переходное время функция, а также Переход задержки. Сокращенное свойство содержит все отдельные свойства в сокращенной форме..

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

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

 .элемент фон: оранжевый; свойство перехода: фон; длительность перехода: 3 с; функция времени перехода: легкость в работе;  .element: hover фон: красный; 

Мы указали фон свойство, потому что это то, что будет изменено во время перехода.

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

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

 .элемент фон: оранжевый; переход: фон 3s easy-in;  .element: hover фон: красный; 

Если мы хотим создать анимацию, мы должны указать ключевые кадры. Свойства CSS должны быть изменены в отдельно определенных @keyframes по-правилам. Вот пример того, как мы можем сделать это:

 .элемент позиция: относительная; название анимации: слайд; продолжительность анимации: 3 с; анимация-функция времени: легкость в работе;  @keyframes slide 0% left: 0;  50% слева: 200 пикселей;  100% слева: 400 пикселей; 

В приведенном выше примере мы создали очень простой скользящий эффект. Мы определили анимация имя, затем привязать к нему 3 ключевых кадра, которые мы указали в @keyframes slide … по-правилам. Проценты относятся к продолжительности анимации, поэтому 50% происходит в 1,5 с в примере.

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

 .элемент позиция: относительная; анимация: слайд 3s easy-in;  @keyframes slide from left: 0;  до слева: 400 пикселей; 

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

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

CSS3-анимации и переходы долгое время работали с префиксами вендоров, которые нам больше не нужны, однако Mozilla Developer Network все еще рекомендует добавить -WebKit префикс на некоторое время, так как поддержка браузеров на основе Webkit только недавно достигла стабильности.