Алгоритм времени перехода: transition-timing-function

transition-timing-function

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 38 -webkit- 4.0 (2.0) -moz- 10 11.6 -o- 7 -webkit-
Мобильные браузеры Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 -webkit- 4.0 (2.0) -moz- 8.0 12.1 (Yes) -webkit-
Свойство
transition-timing-function — в значении этого свойства указывается способ изменения времени перехода
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps | cubic-bezier(x, x, x, x)
Значение по умолчанию
ease
Правила записи
свойство: значение;
Примеры

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

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

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

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

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

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

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

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

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

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

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

  • Значение background-color свойства transition-property указывает на то что анимироваться будет цвет фона;
  • Значение 3s свойства transition-duration указывает на то что переход будет длиться 3 секунды;
  • Значение steps(3, start) свойства transition-timing-function указывает что переход цвета фона будет изменяться в 3 этапа, слово start означает что изменение цвета происходит в начале каждого этапа
  • Псевдокласс hover указывает что при наведении курсора мыши на элемент формы цвет фона в форме будет изменен на yellow

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

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

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

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