Создавайте классные анимации пользовательского интерфейса с помощью CSS

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

Читайте дальше, чтобы узнать о переходах CSS, или перейдите на страницу 2 для ключевых кадров CSS, страница 3 для более подробного ознакомления с производительностью анимации, страница 4. для руководства по анимации SVG. Или перейдите на страницу 5, чтобы узнать, как собрать все вместе для создания анимации пользовательского интерфейса.

Нужно больше вдохновения? Взгляните на наш свод удивительных примеров CSS-анимации (и как их кодировать).

CSS-переходы

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

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

  .button {background-color: Crimson ; transition: background-color 500ms;} .button: hover {background-color: DarkRed;}  

Синтаксис перехода

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

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

transition-duration
Это свойство позволяет нам контролировать продолжительность перехода от одного значения свойства к другому. возьму. Это может быть определено в секундах ( с ) или миллисекундах ( мс ).

функция времени перехода
Функции синхронизации или «ослабление» позволяет нам регулировать скорость изменения во времени. Есть несколько ключевых слов, которые мы можем использовать. Например, ключевое слово linear будет переходить от A к B с одинаковым темпом, тогда как замедление начнется медленно, ускорится в середине и замедлится к концу , Пользовательские функции синхронизации также могут быть определены с помощью свойства cubic-bezier . См. Полный список ключевых слов синхронизации.

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

Сокращение перехода

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

  transition: свойство || продолжительность || функция времени || задержать; переход: фоновый цвет 500 мс, линейный 250 мс;  

Мы можем опускать значения, которые нам не нужны, чтобы установить значения по умолчанию.

Объединение переходов

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

  переход: фоновый цвет 500 мс линейный, цвет 250 мс easy-in 250 мс;  

Поддержка браузера

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

Существуют исключения с некоторыми более новыми свойствами анимации; CSS Motion Path, например, или при использовании SVG или пользовательских свойств (переменных CSS) в качестве части анимации.

Префикс по большей части, вероятно, не требуется, если только нам не требуется поддержка Internet Explorer 10 и ниже. Есть несколько способов, которыми мы можем префикс кода, если это необходимо. Автоматический префикс — это действительно полезный инструмент, который можно использовать как часть процесса сборки или вручную в конце проекта. Это позволяет нам настроить поддержку браузера, которая вам нужна, а затем автоматически добавит префикс нашего кода.

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

Следующая страница: Руководство по ключевым кадрам CSS