Свойство transition-timing-function
Свойство transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую).
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в 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 |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
div {
background:#ccc;
transition-property:background;
transition-duration:5s;
transition-timing-function:ease-in-out;
}
Твой код:
Результат:
большой полигон
Заметки
Это свойство относится к модулю CSS Transitions Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.
Safari 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transition-timing-function.
Opera 10.5 и выше поддерживает аналогичное свойство -o-transition-timing-function но только для блочных и строчных элементов.
Разработчики Firefox заявляют поддержку аналогичного свойства -moz-transition-timing-function с выходом Firefox 4.0.