transition

Описание

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

transition
Значения: нет
Начальное значение: нет
Область применения: все элементы, псевдоэлементы :before и :after
Наследование: нет
Поддержка браузерами: Internet Explorer 10+ (-ms), Chrome 1+ (-webkit), Opera 10.5+, Safari 3+ (-webkit), Firefox 1+ (-moz)
Версия CSS: CSS 3
Примечание:

Значения

transition
Сокращенное свойства для указания значений всех четырех свойств в одно
transition-property
Определяет имя свойства CSS для которого применяется эффект
По умолчанию — all
transition-duration
Определяет длительность эффекта
По умолчанию — 0
transition-timing-function
Определяет как будет изменяться скорость во время перехода
По умолчанию — ease
transition-delay
Определяет задержку до начала эффекта
По умолчанию — 0

Синтаксис

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Пример

ДЕМО
Первый пример представляет плавное изменение высоты блочного элемента за 1 секунду

div {
	transition: height 1s;
	-webkit-transition: height 1s; /* Safari and Chrome */
	-moz-transition: height 1s; /* Firefox 4 */
	-o-transition: height 1s; /* Opera */
}

аналогично можно сделать и для изменения ширины

div {
	transition: width 2s;
	-webkit-transition: width 2s; /* Safari and Chrome */
	-moz-transition: width 2s; /* Firefox 4 */
	-o-transition: width 2s; /* Opera */
}

Если не указать длительность transition-duration эффекта, то переход будет мгновенным, так как значение длительности по-умолчанию 0.
А вот значение по-умолчанию для transition-property является all, так что если его не указывать, то анимации будет подвержены все изменения стилей (пример 3).
Анимация начинается только после изменения свойств объекта посредством псевдоклассов.
В приведенном ниже примере при наведении мыши на блоки (div:hover) изменяются их размеры

div {
	width:100px;
	height:100px;
	transition: width 2s;
	-webkit-transition: width 2s; /* Safari and Chrome */
	-moz-transition: width 2s; /* Firefox 4 */
	-o-transition: width 2s; /* Opera */
div:hover {
	width:200px;
}

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

div {
	width:100px;
	height:100px;
	transition: width 3s;
	-webkit-transition: width 3s; /* Safari and Chrome */
	-moz-transition: width 3s; /* Firefox 4 */
	-o-transition: width 3s; /* Opera */
}
div:hover {
	width:200px;
	transition: width 1s;
	-webkit-transition: width 1s; /* Safari and Chrome */
	-moz-transition: width 1s; /* Firefox 4 */
	-o-transition: width 1s; /* Opera */
}

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

div {
	transition: width 2s, height 2s, background 2s;
	-moz-transition: width 2s, height 2s, background 2s;
	-webkit-transition: width 2s, height 2s, background 2s;
	-o-transition: width 2s, height 2s, background 2s;
}

И напоследок разберемся еще с оним свойством CSS3 transition, которое мы еще не применяли.
transition-timing-function — описывает, как будут рассчитываться промежуточные значения перехода от начального положения (состояния) к конечному. Или, другими словами, как будет изменяться скорость перехода в зависимости от его продолжительности.
transition-timing-function может принимать одно из следующих значений:

ease
быстрый переход;
linear
линейный переход;
ease-in
плавное начало;
ease-out
плавный конец;
ease-in-out
плавные начало и конец;
cubic-bezier
зависит от введенных вручную значений (cubic-bezier(х1,у1,х2,у2)).

На примерах 6-11 можно посмотреть все значения этого свойства в действии.

Комментирование запрещено.