Свойство -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 |
|---|---|
| Применимо | к блочным и строчным элементам |
| Наследование | нет |
| Поддерживается браузерами |
|
Пример
CSS
div {
background-color:#ccc;
-webkit-animation-name:'anime';
-webkit-animation-duration:30ms;
-webkit-animation-timing-function:ease-in-out;
}
Заметки
В спецификации CSS3 есть аналогичное свойство animation-timing-function.
По теме
- Вендорные префиксы. Что это?
- Анимация в CSS3. Часть I
- Анимация в CSS3. Часть II
- Правило @keyframes
- Свойство animation
- Свойство animation-delay
- Свойство animation-direction
- Свойство animation-duration
- Свойство animation-iteration-count
- Свойство animation-play-state
- Свойство animation-name
Показать комментарии