Главная/ Cправочник HTML, CSS, Javascript/ CSS расширения/ Webkit/ Properties/ Свойство -webkit-animation-timing-function | назначение, допустимые значения, примеры

Свойство -webkit-animation-timing-function

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

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

Возможные значения свойства представляют собой различные кривые Безье третьего порядка, заданные координатами четырех точек. Координаты начальной точки 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
Применимо к блочным и строчным элементам
Наследование нет
Поддерживается браузерами
  • Safari 4 и выше
  • Chrome 3 и выше

Пример

CSS

div {
background-color:#ccc;
-webkit-animation-name:'anime';
-webkit-animation-duration:30ms;
-webkit-animation-timing-function:ease-in-out;
}


Заметки

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

По теме

Теги: , , , ,
Показать комментарии