Написание каждого свойства перехода по отдельности может напрягать, особенно с префиксами. К счастью, есть сокращённое свойство transition, способное поддерживать все эти разные свойства и значения. Используя одиночное значение transition, вы можете установить каждое значение перехода в следующем порядке: transition-property, transition-duration, transition-timing-function и, наконец, transition-delay. Не используйте запятые с этими значениями, если не желаете определить несколько переходов.

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

.box { background: #2db34a; border-radius: 6px; transition: background .2s linear, border-radius 1s ease-in 1s; } .box:hover { color: #ff7b29; border-radius: 50%; }

Источник: webref.ru

Кроме объявления свойства перехода, длительности и функции времени, вы можете также установить задержку через свойство transition-delay. Задержка задаёт значение времени, в секундах или миллисекундах, которое определяет, сколько времени переход должен ожидать перед выполнением. Как и со всеми другими свойствами перехода, чтобы задержать многочисленные переходы, каждая задержка может быть перечислена через запятую.

.box { background: #2db34a; border-radius: 6px transition-property: background, border-radius; transition-duration: 1s; transition-timing-function: linear; } .box:hover { background: #ff7b29; border-radius: 50%; }

Свойство transition-timing-function используется для задания скорости, с которой будет двигаться переход. Зная длительность из свойства transition-duration у перехода может быть несколько скоростей в пределах одной длительности. Некоторые наиболее популярные значения ключевых слов для свойства transition-timing-function включают linear, ease-in, ease-out и ease-in-out.

Значение linear определяет переход, движущийся в постоянной скоростью из одного состояния к другому. Значение ease-in определяет переход, который начинается медленно и ускоряется на протяжении перехода, в то время как значение ease-out определяет переход, который начинает быстро и замедляется в течение всего перехода. Значение ease-in-out определяет переход, который начинается медленно, ускоряется в середине, а затем снова замедляется перед окончанием.

За каждой функцией времени стоит кубическая кривая Безье, которую можно указать конкретно с помощью значения cubic-bezier(x1, y1, x2, y2). Дополнительные значения включают step-start, step-stop и значение steps(<число шагов>, <направление>).

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

.box { background: #2db34a; border-radius: 6px; transition-property: background, border-radius; transition-duration: .2s, 1s; transition-timing-function: linear, ease-in; } .box:hover { background: #ff7b29; border-radius: 50%; }

Длительность перехода задаётся с помощью свойства transition-duration. В качестве значения этого свойства можно использовать основные значения времени, в том числе секунды (s) и миллисекунды (ms). Эти значения времени можно также задавать и дробными — .2s, например.

При переходе нескольких свойств можно задать несколько длительностей, по одному на каждое свойство. Как и в случае значения свойства transition-property, несколько длительностей могут быть объявлены с помощью значений, разделённых запятыми. Важен порядок этих значений при определении отдельных свойств и длительностей. К примеру, первое свойство, заданное в transition-property, будет совпадать с первым значением в свойстве transition-duration и так далее.

Если на несколько свойств в переходе приходится только одно значение длительности, то оно будет задавать длительность для всех свойств перехода.

.box { background: #2db34a; border-radius: 6px; transition-property: background, border-radius; transition-duration: .2s, 1s; transition-timing-function: linear; } .box:hover { background: #ff7b29; border-radius: 50%; }

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

В приведённом примере(см. Переходы: цвет), свойство background определено в значении transition-property. Здесь background — единственное свойство, которое будет изменяться в течение 1 секунды в линейном виде. Любые другие свойства, включённые когда изменяется состояние элемента, но не добавленные в значение transition-property, не получат поведение перехода, как это установлено в свойствах transition-duration или transition-timing-function.

Если требуется добавить несколько свойств в переход, они могут быть разделены запятой внутри значения transition-property. Кроме того, может быть использовано ключевое слово all для перехода всех свойств элемента.

.box { background: #2db34a; border-radius: 6px transition-property: background, border-radius; transition-duration: 1s; transition-timing-function: linear; } .box:hover { background: #ff7b29; border-radius: 50%; }

Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами :hover, :focus, :active и :target.

Есть четыре свойства, связанных с переходами в целом, это transition-property, transition-duration, transition-timing-function и transition-delay. Не все они обязательны для создания перехода, наиболее популярны первые три. Поговорим о каждой transition отдельно.

В приведённом ниже примере блок изменит цвет фона в течение одной секунды в линейном виде. Для этого пропишем команду:

.box { background: #2db34a; transition-property: background; transition-duration: 1s; transition-timing-function: linear; } .box:hover { background: #ff7b29; }

.box { background: #2db34a; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; } .box:hover { background: #ff7b29; }