Свойство transition в CSS

Определение и использование

Атрибут transition — это сокращенная форма, которая используется для установки четырех свойств перехода:

Комментарии:Всегда устанавливайте transition-duration Если атрибут не задан, то переход не будет производиться, если длительность равна 0.

См. также:

Учебник по CSS:Переходы в CSS

Руководство по HTML DOM:Атрибут transition

Пример

Переместите указатель мыши на элемент div, и его ширина будет постепенно увеличиваться до 300px:

div {
  width: 100px;
  transition: width 2s;
}

Попробуйте сами

CSS синтаксис

transition: свойство длительность функция времени задержка;

Значение атрибута

Значение Описание
transition-property Определяет имя CSS-атрибута, который устанавливает эффект перехода.
transition-duration Определяет, сколько секунд или миллисекунд потребуется для завершения эффекта перехода.
transition-timing-function Определяет кривую скорости эффекта.
transition-delay Определяет, когда начинается эффект перехода.

Технические детали

Значение по умолчанию: all 0 ease 0
Наследование: нет
Версия: CSS3
JavaScript синтаксис: object.style.transition="width 2s"

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа с префиксами -webkit-, -moz- или -o- указывают на первую версию, в которой используется префикс.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-