Ознакомление с CSS-переходами (transition)

В сегодняшней статье мы проведем ознакомительный рейд по полезным, как я надеюсь, вопросам CSS-переходов. Это новое свойство в CSS3 позволяет создавать на сайте привлекательную и «магическую» интерактивность, даже без использования JavaScript. Рассмотрим также некоторые практические примеры применения этого свойства в CSS.

Развитие языка CSS в последние годы сделало возможной реализацию некоторых действительно удивительных нововведений. Если еще 5 лет назад для создания некой интерактивности на сайте требовалась такая программа, как, например, Adobe Flash, и использование языка программирования JavaScript, то сегодня практически все это можно реализовать с помощью только HTML и CSS.

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

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

Что такое CSS-переходы (transition)?

Переходы в CSS позволяют изменять значения свойств элемента за заданный период времени. Другими словами, осуществляется переход от одного состояния к другому. Например, блок div имеет белый фоновый цвет – это его начальное состояние. А мы хотим, чтобы при наведении курсора на этот блок, фоновый цвет изменялся на черный – это и будет его новым состоянием. Для подобного трюка можно было бы использовать и простое свойство :hover, но качественное отличие transition заключается именно в возможности задавать время для перехода, — что позволяет добавить «плавности» такому переходу.

transition присваивается определенному блоку в его «спокойном» (обычном) состоянии. Чтобы создать переход, необходимо выбрать CSS-свойство, к которому будет применяться переход (например, цвет фона — background-color), а потом указать продолжительность такого эффекта (в секундах). Учтите, что если продолжительность эффекта не установлена, переход просто не произойдет. Также, вместо указания определенного свойства CSS, можно указать все свойства (используйте ключевое слово all).

Есть четыре свойства transition:

transition-property – указывает на имя свойства CSS, для которого предназначен эффект перехода (например, background-color, color, font-size и другие), или же можно указать все свойства CSS (используется ключевое слово all).
transition-duration – определяет продолжительность перехода, в секундах (s) или миллисекундах (ms)
transition-timing-function – определяет кривую скорости эффекта для перехода. Т.е., отвечает за тип изменения скорости перехода. В этом свойстве нет вариантов «быстро» или «медленно». Вместо этого используются варианты кривой, по которой идет изменение от одной скорости к другой. Например, очень популярное свойство ease, которое подразумевает: сначала медленно, затем быстро, и потом медленно
transition-delay – определяет задержку перед выполнением перехода, в секундах (s). Можно не указывать.

Весь синтаксис выглядит так:

div {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Пример кода CSS, когда при наведении на блок div, происходит изменение (переход) фонового цвета за 0,5 секунд:

div {
  transition: background-color 0.5s ease;
  background-color: white;
}

div:hover {
  background-color: black;
}

Пример кода CSS, когда при наведении на все теги p (абзацы) изменяются их размер шрифта и цвет за 1 секунду:

p {
  transition: all 1s ease;
  color: white;
  font-size: 14px;
  background-color: black;
  padding: 25px;
}

p:hover {
  color: black;
  font-size: 16px;
  background-color: white;
}

Демо-пример кода

Смотреть Пен Ознакомление с CSS-переходами (transition) by ZAnatoly (@ZAnatoly) на CodePen.

Практически все современные браузеры поддерживают это свойство, но для большей совместимости нужно использовать префиксы браузеров, причем стандартный синтаксис объявляется последним:

.div {
  -webkit-transition: color 0.5s ease-in 1s;
  -moz-transition: color 0.5s ease-in 1s;
  -o-transition: color 0.5s ease-in 1s;
  transition: color 0.5s ease-in 1s;
}

В продолжение темы: Ознакомление с CSS-анимацией (animation)