Другое

Свойство «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.

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

Аналоги Фрапса. Несколько лучших программ для захвата экрана
Другое

Аналоги Фрапса. Несколько лучших программ для захвата экрана

Oracle: партицирование таблиц, как управлять секциями
Другое

Oracle: партицирование таблиц, как управлять секциями

Какие преимущества языка C и что на нем могут написать программисты?
Другое

Какие преимущества языка C и что на нем могут написать программисты?

Как оптимизировать рабочий процесс: полезные советы и лайфхаки
Другое

Как оптимизировать рабочий процесс: полезные советы и лайфхаки