Переход для свойства: transition-property

transition-property

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 4.0 -webkit- 4.0 -moz- 10.0 10.5 -o- 3.1 -webkit-
Мобильные браузеры Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 -webkit- 4.0 (2.0) -moz- 8.0 12.10 -o- 7.1.2 -webkit-
Свойство
transition-property — в значении этого свойства указывается свойство к которому будет применен переход
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
имя свойства | all | none | inherit
Значение по умолчанию
all
Правила записи
свойство: значение;
Примеры

Наведите указатель мыши на форму

  • Значение color свойства transition-property указывает на то что анимироваться будет цвет текста;
  • Значение 1s свойства transition-duration указывает на то что переход будет длиться одну секунду;
  • Псевдокласс hover указывает что при наведении курсора мыши на элемент формы цвет текста в форме будет изменен на lime

Переход получат все свойства к которым можно применить анимацию

Значение none отменяет эффект перехода для всех свойств

Это значит что свойство унаследует значение от родителей

Поделиться