Сокращенное свойство перехода: transition

transition

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 -webkit- 4.0 (2.0) -moz- 10.0 10.1 -o- 3.0 -webkit-
Мобильные браузеры Android Firefox Mobile (Gecko) Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.1 -webkit- 4.0 (2.0) -moz- 10.0 -o- 3.2 -webkit-
Свойство
transition — это сокращенное свойство для анимированного перехода
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
transition-property | transition-duration | transition-timing-function | transition-delay
Значение по умолчанию
all — для свойства transition-property
0s — для свойства transition-delay
ease — для свойства transition-timing-function
0s — для свойства transition-duration
Правила записи
свойство: transition-property transition-duration transition-timing-function transition-delay;

  • Значение перечисляются через пробел
  • Последовательность важна только для значений transition-duration и transition-delay
  • Если указано только одно значение времени то это время будет относиться к свойству transition-duration
  • Если указано два значения времени то первое значение времени будет относиться к свойству transition-duration, а второе к свойству transition-delay
Примеры

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

  • Значение background-color свойства transition-property указывает на то что анимироваться будет цвет фона;
  • Значение 2.1s свойства transition-duration указывает на то что переход будет длиться 2.1 секунды;
  • Значение linear свойства transition-timing-function указывает что цвет фона изменяется с одинаковой скоростью от начала и до конца
  • Значение 0.6s свойства transition-delay указывает что цвет фона начнет изменяться спустя 0.6 секунд
  • Псевдокласс hover указывает что при наведении курсора мыши на элемент формы цвет фона в форме будет изменен на yellow
Поделиться