transition-property

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


12.0+	10.0+	16.0+	26.0+	12.1+	6.1+

Описание

CSS свойство transition-property указывает CSS-свойство, для которого будет применён эффект перехода. Этот эффект начинается, когда значение указанного свойства изменяется с помощью различных состояний элемента, например при использовании псевдо-классов :hover и :active.

Если указывается свойство, которое содержит значения других свойств, например background, то ко всем свойствам, которые могут быть анимированы, будет применён эффект перехода.

Примечание: всегда указывайте значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.

Значение по умолчанию:	all
Применяется:	ко всем элементам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.transitionProperty="width,height"

Синтаксис

transition-property: none|all|свойство|inherit;

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

Значение	Описание
none	Нет свойства, для которого будет применён эффект перехода.
all	Все свойства, которые могут анимироваться, получат эффект перехода.
свойство	Определяет CSS-свойства через запятую, для которых будет применён эффект перехода, когда будут изменены значения указанных свойств.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: width;
      transition-duration: 3s;
    }
    div:hover { width: 600px; }
  </style>
</head>
<body>

  <div></div>
  <p>Наведите на красный квадрат, чтобы увидеть эффект перехода.</p>

</body>
</html>

Результат данного примера:

Наведите на красный квадрат, чтобы увидеть эффект перехода.