Оживите свои веб-страницы с помощью CSS-анимации и переходов

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

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

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

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

CSS-анимации

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

Указание @keyframes

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

• какие свойства меняются
• когда элемент оживляется
• как элемент анимируется

Вы можете определить свой собственный ключевой кадр как:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Здесь «до» и «от» указывают начало и конец анимации. Мы также можем указать анимацию для промежуточных моментов времени между началом и концом следующим образом:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Здесь 0% представляет начало анимации, 100% — конец анимации, а 50% — изменение между началом и концом. Но как сообщить браузеру, сколько времени должна длиться анимация? Мы делаем это с помощью определенных свойств анимации . Эти свойства анимации связаны с анимируемым элементом. Например:

element_name
{
animation_property: value;
style_property: value;
}

Здесь element может быть любым HTML-тегом, таким как div, span, img, p и т. д., а style_property — любое свойство стиля CSS, такое как background_color, width, height и т. д. Давайте теперь подробно рассмотрим некоторые свойства анимации.

1. @keyframes : ключевые кадры используются для указания кода анимации, как обсуждалось выше.
2. animation-name : имя, указанное с помощью @keyframes, является именем анимации. Это имя используется для ссылки на ключевые кадры с анимируемым элементом.
3. animation-duration : используется для указания продолжительности анимации в секундах или миллисекундах. Например, если мы установим его на 5 секунд, анимация будет работать только 5 секунд. Если мы не установим это свойство, то анимация вообще не запустится, так как ее значение по умолчанию равно 0.
4. анимация-задержка : мы можем отложить начало анимации, указав время задержки анимации. Например, если вы хотите запустить анимацию через 5 секунд после загрузки страницы в браузере, просто установите для параметра animation-delay значение 5 с.
5. анимация-направление : с помощью этого свойства мы можем сообщить браузеру, движется ли анимация в обратном направлении или чередуются циклы. Например, если вы хотите, чтобы анимация выполнялась от начала до конца, установите значение продолжительности анимации как «нормальное». Если вы хотите, чтобы он работал от конца к началу, просто установите значение «reverse».
6. animation-fill-mode : мы можем указать стиль элемента, когда анимация не воспроизводится в этом режиме, т.е. когда анимация задерживается или завершается, тогда каким должен быть стиль элемента.
7. animation-iteration-count : количество раз, которое может быть воспроизведена анимация, представлено этим свойством. Например, если вы хотите воспроизвести анимацию один раз, установите для нее значение 1 или если вы хотите, чтобы анимация воспроизводилась вечно, просто установите для нее значение «бесконечно».
8. анимация-тайминг-функция : это свойство используется для указания кривой скорости анимации, такой как линейная, ускорение или замедление.
9. Анимация : это сокращенное свойство для установки всех свойств анимации.

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

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Переходы

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

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

element 
{
style_property: value;
transition_property: value;
}

Здесь element указывает элемент HTML, который вы хотите преобразовать, например div, H1, img и т. д. style_property — это стиль CSS, применяемый к этому элементу. Давайте теперь посмотрим на некоторые свойства перехода :

• transition-property : эффект перехода всегда будет применяться к CSS-свойству элемента, например к его ширине, высоте, цвету или форме. Значение этого атрибута указывает свойство CSS элемента. Эффект перехода будет запускаться всякий раз, когда это свойство изменяется, например, при наведении мыши или щелчке.
• transition-timing-function : это функция замедления, которая будет применена к элементу. Это свойство используется для указания кривой скорости перехода, например, плавного входа, плавного выхода, линейного и т. д.
• transition-duration : это похоже на свойство animation-duration. Он используется для указания продолжительности эффекта перехода в секундах или миллисекундах. Например, если мы установим его на 5 секунд, то переход будет завершен через 5 секунд. Если мы не установим это свойство, то перехода вообще не будет, так как его значение по умолчанию равно 0.
• transition-delay : с помощью этого свойства мы можем указать продолжительность задержки эффекта перехода. Например, если вы хотите запустить эффект через 5 секунд после наведения курсора мыши, просто установите задержку перехода на 5 секунд.
• переход : Это сокращенное свойство для установки всех вышеперечисленных свойств перехода вместе.

Например, следующий код изменит ширину элемента div при наведении курсора мыши. См. примененное здесь сокращенное свойство перехода.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

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

Сходства между анимацией и переходами

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

Различия между анимацией и переходами

• CSS-переходы являются реактивными . Они должны быть активированы пользователями. С другой стороны, анимация запускается всякий раз, когда страница загружается в браузере. Их не обязательно запускать.
• Переходы выполняются один раз, а затем останавливаются. Затем мы должны запускать их снова и снова, пока анимация может зацикливаться . Они могут начать на своей собственной остановке, а затем снова начать.
• Браузер сам позаботится о переходах. Нам просто нужно указать начало и конец перехода. Мы можем установить эффект перехода, но мы не можем изменить скорость изменения перехода между ними. Например, если изображение скользит при наведении мыши, мы просто увидим, как оно появляется или исчезает, когда мы наводим на него курсор.
• С другой стороны, анимация обеспечивает гибкость изменения свойств между началом и концом. Это происходит с помощью ключевых кадров. Например, мы можем установить красный цвет изображения на первые 5 секунд, затем синий на следующие 5 секунд, затем зеленый на следующие 5 секунд и желтый на последние 5 секунд анимации. Следовательно, у нас есть контроль над анимацией.

Префиксы поставщиков

Все функции CSS3 поддерживаются не каждым браузером. Следовательно, мы используем префиксы для этих свойств CSS для определенных браузеров, таких как -webkit- (Safari), -moz- (Firefox) или -o- (Opera). Это позволяет маркерам браузера добавить поддержку этой функции CSS3. Эти префиксы известны как префиксы поставщиков или префиксы браузера CSS . Следовательно, нам нужно поместить префиксы поставщиков вместе со свойствами анимации и перехода. Например, рассмотрите приведенный ниже код и посмотрите, как использовались префиксы поставщиков для Safari:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Кончик! Вы можете избежать этой суеты, используя такие библиотеки, как -prefix-free . Это библиотека JavaScript, которая добавит префикс текущего браузера к любому коду CSS. Ознакомьтесь со многими такими библиотеками, доступными в Интернете.

Вывод

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