-moz-transition-timing-function

Свойство -moz-transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в -moz-transition-property.

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

Возможные значения свойства представляют собой различные кривые Безье третьего порядка, заданные координатами четырех точек. Координаты начальной точки P0(0;0), координаты конечной точки P3(1;1). Координаты промежуточных точек P1(x1;y1) P2(x2;y2) заданны четырьмя значениями свойства в порядке (x1;y1;x2;y2). Координаты могут принимать значения от 0 до 1.
  • ease — кривая Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0)
  • linear — кривая Безье 3-го порядка с координатами P1(0.0, 0.0) P2(1.0, 1.0)
  • ease-in — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(1.0, 1.0)
  • ease-out — кривая Безье 3-го порядка с координатами P1(0, 0) P2(0.58, 1.0)
  • ease-in-out — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(0.58, 1.0)
  • cubic-bezier (<число>, <число>, <число>, <число>) — кривая Безье 3-го порядка с координатами P1(x1, y1) P2(x2, y2).Где x1,y1,x2,y2 — произвольные значения координат заданные пользователем (в промежутке от 0 до 1).
Значение по умолчанию ease
Применимо ко всем элементам, псевдоэлементам :before и :after
Наследование нет
Поддерживается браузерами
  • Firefox 4.0 и выше

Пример

CSS
div {
background-color:#ccc;
-moz-transition-property:background-color;
-moz-transition-duration:30ms;
-moz-transition-timing-function:ease-in-out;
}

Заметки

На момент выхода статьи Firefox 4.0 еще не вышел, но поддержка этого свойства заявлена на сайте разработчиков.

В спецификации CSS3 есть аналогичное свойство transition-timing-function.

По теме