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 компонентов, которые отвечают за какое-то отдельное свойство перехода:
Свойство «transition-property». Указывает на то, что будет изменяться в HTML-элементе. Например: фон, форма, прозрачность, цвет, ширина, высота и др.
Свойство «transition-duration». Определяет длительность перехода, то есть показывает, сколько времени займет смена состояний элемента. В качестве значений можно указать секунды или миллисекунды. Если элемент сменяет несколько состояний, тогда для каждой смены можно указать свою длительность, если в этом свойстве написать несколько значений.
Свойство «transition-timing-function». Задает скорость, с которой происходит переход между состояниями. Когда хочется организовать плавное появление HTML-компонентов на странице, нужно задействовать именно это свойство. К примеру, вы хотите, чтобы какой-либо блок плавно появился на экране. В этом случае «transition-duration» будет отвечать за то, как долго по времени будет появляться блок. А «transition-timing-function» будет отвечать за то, как именно блок будет появляться: равномерно и с одинаковой скоростью в течение всего времени, с ускорением в начале или в конце появления и др.
Свойство «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.
Другое
