CSS свойство transition-property

❮ Назад Вперед ❯

Свойство transition-property указывает названия для свойств transition. Названия свойств могут быть указаны через запятые, или может быть использовано значение "all", чтобы указать все свойства элемента к которым должен быть применен переход.

Переход не может быть применен ко всем CSS свойствам.

Для максимальной совместимости браузера могут быть применены такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии), -moz- для Firefox, -o- для более старых версий Opera.

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

Синтаксис

transition-property: none | all | property | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 1s; 
      transition-duration: 1s;
      -webkit-transition-property: height;
      -moz-transition-property: height;
      -o-transition-property: height;
      transition-property: height;
      }
      div:hover {
      height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-property</h2>
    <p>Наведите курсор мыши на элемент, чтобы увидеть результат.</p>
    <div></div>
  </body>
</html>

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

Рассмотрим другой пример, где переход применен для ширины и высоты элемента:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 1s; 
      -webkit-transition-property: width, height;
      -moz-transition-property: width, height;
      -o-transition-property: width, height;
      transition-property: width, height;
      transition-duration: 1s;
      }
      div:hover {
      width: 200px;
      height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-property</h2>
    <p>Наведите курсор мыши на элемент, чтобы увидеть результат.</p>
    <div></div>
  </body>
</html>

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

Значения

Значение	Описание
none	Эффект перехода не применяется.
all	Эффект перехода применяется для всех свойств.
property	Для применения эффекта перехода через запятые указывает список названий CSS свойств
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.