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 Значение элемента наследуется от родительского элемента.

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

26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-


Считаете ли это полезным?

Похожие статьи