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

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

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

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

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

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

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

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

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

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

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

Увидеть перо CSS3 переходы Хорнебом (@Hornebom) на CodePen,
Анимации
Если мы хотим визуализировать изменения состояния с помощью более сложных движений или если у нас нет явного триггера, например, если мы хотим запустить эффект при загрузке страницы, анимации путь

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

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

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

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

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

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

Увидеть перо Анимация выпадающего меню Карстен Бакстегге (@MrBambule) на CodePen,
Свойства CSS и правило @keyframes
За переходы мы можем использовать либо переход Сокращенное свойство или 4 отдельных свойства, связанных с переходом: переход-недвижимость, Продолжительность перехода, переходное время функция, а также Переход задержки, Сокращенное свойство содержит все отдельные свойства в сокращенной форме.

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

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

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

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

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

.element {
фон: оранжевый;
переход: фон 3s easy-in;
}
.element: hover {
фон: красный;
}
Если мы хотим создать анимацию, мы должны указать соответствующие ключевые кадры. Свойства CSS должны быть изменены в отдельно определенных @keyframes по-правилам, Вот пример того, как мы можем сделать это:

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

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

.element {
положение: относительное;
анимация: слайд 3s easy-in;
}
@keyframes slide {
от {
слева: 0;
}
к {
слева: 400 пикселей;
}
}
Создание более сложных анимаций – это отдельная форма искусства. Если вам интересно, вы можете прочитать два наших урока, посвященных анимации, о том, как создать расширенный шатер и как создать эффект отскока.

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

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