Свойства CSS

Меню

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> 

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

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