Другое

Свойство «transition» в CSS: анимационные переходы, как это сделать

Lorem ipsum dolor

CSS-свойство «transition» помогает контролировать простую анимацию переходов на веб-странице:

  • обеспечивает плавное появление HTML-элементов;

  • контролирует скорость анимационных эффектов;

  • определяет задержку появления анимации;

  • определяет переход между геометрической формой компонентов;

  • и др.

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

CSS-свойство «transition» было добавлено с приходом технологии CSS3. До этого момента веб-разработчикам приходилось анимировать HTML-элементы другими инструментами: 

  • JavaScript-скриптами;

  • flash-технологией.

Flash-технология себя изжила и уже не справляется со всеми поставленными задачами. JavaScript-скрипты отлично со всем справляются, однако «нагружают» сайт своим весом. А CSS-свойство «transition» отлично справляется с поставленными задачами, плюс практически не нагружает сайт.

CSS-свойство «transition»

CSS-свойство «transition» является лишь малой частью большого количества инструментов CSS, которые используются для создания анимации. Его основное назначение — отвечать за переходы между состояниями HTML-элементов. Состояние — это набор CSS-стилей элемента в определенный момент времени. Можно определить несколько состояний и потом заставить элемент «примерять» их одно за другим с определенной скоростью. Это и будет простой анимацией, когда при наведении на элемент он:

  • изменяет форму;

  • изменяет размер;

  • меняет цвет;

  • передвигается внутри блока;

  • и др.

Активировать изменения состояний элементов можно с помощью псевдоклассов:

  • «:hover» — наведение курсора на элемент;

  • «:focus» — фокусировка внимания пользователя на элементе;

  • «:active» — активные действия с элементом;

  • и др.

Итак, состояние HTML-элементов регулирует СSS-свойство «transition». Оно состоит из 4 компонентов, которые отвечают за какое-то отдельное свойство перехода:

  1. Свойство «transition-property». Указывает на то, что будет изменяться в HTML-элементе. Например: фон, форма, прозрачность, цвет, ширина, высота и др.

  2. Свойство «transition-duration». Определяет длительность перехода, то есть показывает, сколько времени займет смена состояний элемента. В качестве значений можно указать секунды или миллисекунды. Если элемент сменяет несколько состояний, тогда для каждой смены можно указать свою длительность, если в этом свойстве написать несколько значений.

  3. Свойство «transition-timing-function». Задает скорость, с которой происходит переход между состояниями. Когда хочется организовать плавное появление HTML-компонентов на странице, нужно задействовать именно это свойство. К примеру, вы хотите, чтобы какой-либо блок плавно появился на экране. В этом случае «transition-duration» будет отвечать за то, как долго по времени будет появляться блок. А «transition-timing-function» будет отвечать за то, как именно блок будет появляться: равномерно и с одинаковой скоростью в течение всего времени, с ускорением в начале или в конце появления и др.

  4. Свойство «transition-delay». Определяет задержку перехода. То есть вам нужно, чтобы блок отреагировал на клик пользователя не сразу, а спустя 1-2 секунды. Такой эффект можно сделать с помощью этого свойства. В качестве значения он принимает секунды и миллисекунды.

Когда создается анимационный эффект с помощью «transition», необязательно использовать все четыре свойства перехода.

CSS-свойство «transition» в примерах

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

#myButton {

  background: #2db45a;

  border-radius: 7px;

  transition-property: background, border-radius;

  transition-duration: .2s, 1s;

  transition-timing-function: linear, ease-in;

  transition-delay: 0s, 1s;

}

#myButton:hover {

  background: #ff8b30;

  border-radius: 50%;

}

 

Чуть выше мы подробно расписали все свойства «transition», которые  применили к нашей кнопке. Однако в CSS присутствует вариант короткой записи, где все отдельные свойства записываются в качестве значения «transition». Таким образом, описанный выше код можно записать более лаконичным способом:

#myButton {

  background: #2db45a;

  border-radius: 7px;

  transition: background 2s linear, border-radius 1s easy-in 1s;

}

#myButton :hover {

  background: #ff8b30;

  border-radius: 50%;

}

 

Заключение

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

Схожие статьи

Интеллектуальный анализ данных: что это, области применения, примеры
Другое

Интеллектуальный анализ данных: что это, области применения, примеры

Как развить Soft Skills и что это такое? Список полезных навыков
Другое

Как развить Soft Skills и что это такое? Список полезных навыков

Не баг, а фича. Что это значит и откуда появилась эта фраза?
Другое

Не баг, а фича. Что это значит и откуда появилась эта фраза?

Освоение API для чайников: теоретическое и практическое руководство
Другое

Освоение API для чайников: теоретическое и практическое руководство