Свойство 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 | CSS 3 |
| Поддерживается браузерами |
|
Пример
div {
width:100px;
height:50px;
position:absolute;
top:5px;
animation-name:'slide';
animation-duration: 10s;
animation-timing-function:cubic-bezier(0.5, 0.3, 0.25, 0.25);
} Заметки
Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.
Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation-timing-function, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes