Свойство transition-timing-function

Свойство transition-timing-function определяет функцию для расчета промежуточных значений, которые принимает заданное css-свойство во время анимированного перехода. Значение transition-timing-function, по умолчанию, равняется ease и не наследуется от родительского элемента. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать функциям для различных css-свойств, в том порядке, в котором они установлены в transition-property. Все временные функции с помощью которых производится расчет основываются на кубичиских кривых Безье, задынных четырмя опорными точками P0, P1, P2 и P3, две из которых фиксированны P0 (0.0, 0.0) и P3(1.0, 1.0)

Допустимые значения

• ease - аналогично cubic-bezier(0.25, 0.1, 0.25, 1.0)
  
• linear - аналогично cubic-bezier(0.0, 0.0, 1.0, 1.0)
  
• ease-in - аналогично cubic-bezier(0.42, 0, 1.0, 1.0)
  
• ease-out - аналогично cubic-bezier(0, 0, 0.58, 1.0)
  
• ease-in-out - аналогично cubic-bezier(0.42, 0, 0.58, 1.0)
  
• cubic-bezier(<число>, <число>, <число>, <число>)

Примеры использования

{notSupported}

Свойство transition-timing-function определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение ease. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

• transition - свойства анимационного перехода
• transition-property - имя css-свойства, к которому будет применен анимационный переход.
• transition-duration - длительность анимационного перехода
• transition-delay - задержка перед выполнением анимационного перехода
• -moz-transition - свойства анимационного перехода
• -moz-transition-property - имя css-свойства, к которому будет применен анимационный переход.
• -moz-transition-duration - длительность анимационного перехода
• -moz-transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
• -moz-transition-delay - задержка перед выполнением анимационного перехода
• -webkit-transition - свойства анимационного перехода
• -webkit-transition-property - имя css-свойства, к которому будет применен анимационный переход.
• -webkit-transition-duration - длительность анимационного перехода
• -webkit-transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
• -webkit-transition-delay - задержка перед выполнением анимационного перехода
• -o-transition - свойства анимационного перехода
• -o-transition-property - имя css-свойства, к которому будет применен анимационный переход.
• -o-transition-duration - длительность анимационного перехода
• -o-transition-timing-function - функция зависимости значения css-свойства от времени во течении анимационного перехода
• -o-transition-delay - задержка перед выполнением анимационного перехода

• Спецификация стандарта CSS 3