Свойство -o-transition-timing-function
Свойство -o-transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую).
Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в -o-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 |
---|---|
Применимо | к блочным и строчным элементам, приведенным в таблице ниже |
Наследование | нет |
Поддерживается браузерами |
|
Пример
div {
background-color:#ccc;
-o-transition-property:background-color;
-o-transition-duration:30ms;
-o-transition-timing-function:ease-in-out;
}
Заметки
Перечень свойств и их типов значений к которым можно применять свойство -o-transition-timing-function.
Свойство | Тип значения | Поддержка |
---|---|---|
background-color | <цвет> | Да |
background-image | только градиент | Нет |
background-position | <процент>, <значение> | Да |
border-bottom-color | <цвет> | Нет |
border-bottom-width | <ширина> | Да |
border-color | <цвет> | Нет |
border-left-color | <цвет> | Нет |
border-left-width | <ширина> | Да |
border-right-color | <цвет> | Нет |
border-right-width | <ширина> | Да |
border-spacing | <значение> | Да |
border-top-color | <цвет> | Нет |
border-top-width | <ширина> | Да |
border-width | <ширина> | Да |
bottom | <процент>, <значение> | Да |
color | <цвет> | Да |
font-size | <процент>, <значение> | Да |
font-weight | <число> | Да |
height | <процент>, <значение> | Да |
left | <процент>, <значение> | Да |
letter-spacing | <значение> | Да |
line-height | <процент>, <значение>, <число> | Да |
margin-bottom | <значение> | Да |
margin-left | <значение> | Да |
margin-right | <значение> | Да |
margin-top | <значение> | Да |
max-height | <процент>, <значение> | Да |
max-width | <процент>, <значение> | Да |
min-height | <процент>, <значение> | Да |
min-width | <процент>, <значение> | Да |
opacity | <число> | Да |
outline-color | <цвет> | Да |
outline-offset | <число> | Да |
outline-width | <значение> | Да |
padding-bottom | <значение> | Да |
padding-left | <значение> | Да |
padding-right | <значение> | Да |
padding-top | <значение> | Да |
right | <процент>, <значение> | Да |
text-indent | <процент>, <значение> | Да |
text-shadow | тень | Нет |
top | <процент>, <значение> | Да |
vertical-align | <процент>, <значение> ключевые слова | Да |
visibility | все значения | Да |
width | <процент>, <значение> | Да |
word-spacing | <процент>, <значение> | Да |
z-index | <число> | Да |
В спецификации CSS3 есть аналогичное свойство transition-timing-function.
По теме
- Вендорные префиксы. Что это?
- Свойство -webkit-transition-timing-function
- Свойство -moz-transition-timing-function
- Псевдокласс :hover
- Свойство transition
- Свойство -o-transition
- Свойство transition-delay
- Свойство -o-transition-delay
- Свойство transition-property
- Свойство transition-timing-function
- Свойство -o-transition-duration