CSS свойство transition

Определение и применение

CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):

transition-property (none | all | property | initial | inherit)
transition-duration (time(s/ms) | initial | inherit)
transition-timing-function (linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | step-start | step-end | cubic-bezier(n,n,n,n) | initial | inherit)
transition-delay (time(s/ms) | initial | inherit)

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
transition	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -o-	6.1 3.1 -webkit-	10.0	12.0

CSS синтаксис:

transition:"property duration timing-function delay | initial | inherit";

/* допускается перечислять эффект перехода отдельно для каждого свойства в одном объявлении */
/* синтаксис будет следующим: property | duration | timing function | delay,..., property | duration | timing function | delay  */
/* допускается указывать не все значения, при этом необходимо соблюдать порядок, указанный вверху примера */
/* учтите, что если вы хотите задать только delay, то вам придется указать и duration (0s) */
/* т.е. если вы хотите указать задержку 4 секунды, то вам необходимо записать это transition: 0s 4s; */

transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s;

/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды, при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease) и это всё происходит с предварительной задержкой в 100 миллисекунд.
Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде, при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear) и это всё происходит с предварительной задержкой в 2 секунды.
Свойство background будет применено с задержкой 4 секунды. */

/* Смотри пример внизу страницы */

JavaScript синтаксис:

object.style.transition = "width 3s ease-out 2s"

Значения свойства

Значение	Описание
transition-property	Указывает имя свойства CSS для которого используется переходный эффект. Значение по умолчанию all.
transition-duration	Определяет, сколько секунд или миллисекунд эффект перехода занимает времени. Значение по умолчанию 0 секунд.
transition-timing-function	Используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую "разгона", так что скорость перехода может меняться в течение длительности эффекта перехода. Значение по умолчанию ease.
transition-delay	Указывает, когда эффект перехода начнется (выступает в роли задержки начала эффекта). Значение по умолчанию 0 секунд.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования универсального свойства transition в CSS</title>
<style> 
div {
width : 100px; /* устанавливаем ширину блока */
height : 60px; /* устанавливаем высоту блока */
background-color : khaki; /* устанавливаем цвет заднего фона */
color : khaki; /* устанавливаем цвет шрифта */
border : 2px solid orange; /* устанавливаем сплошную границу размером 2px оранжевого цвета */
}
div:hover {
width : 300px; /* устанавливаем ширину блока при наведении на элемент */
height : 250px; /* устанавливаем высоту блока при наведении на элемент */
background : CornflowerBlue; /* устанавливаем цвет заднего фона при наведении*/
}
.test   {
transition : width 2s ease 100ms, height 1s linear 2s, background 0s 4s;
/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды, при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease) и это всё происходит с предварительной задержкой в 100 миллисекунд.
Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде, при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear) и это всё происходит с предварительной задержкой в 2 секунды.
Свойство background будет применено с задержкой 4 секунды. */
}
</style>
</head>
	<body>
		<div class = "test">Свойство transition в CSS</div>
	</body>
</html>

Все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении (универсальное свойство transition).

Пример выдвигающегося поиска на CSS, используя селектор атрибута (с указанным значением) и универсальное свойство transition:

<!DOCTYPE html>
<html>
<head>
<title>Выдвигающийся поиск на CSS</title>
<style> 
input[type=text] {
width : 20%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") */
transition : width 500ms ease-in-out; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 500 ms, при этом эффект перехода начинается с медленного старта и заканчивается медленно (ease-in-out) */
}
input[type=text]:focus {
width : 40%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") при получении фокуса */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>

Выдвигающийся поиск на css (универсальное свойство transition и селектор атрибутов).

CSS свойства