Категория > Справочник CSS > transition-timing-function
transition-timing-function22-03-2016, 18:12. Автор: Administrator |
||||||||||||||||||||||||||||||||||||
Краткая информация
Версии CSS
ОписаниеУстанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода. transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).
Рис. 1. Вид функции Синтаксисtransition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|steps|cubic-bezier Значения
ease ease-in ease-out ease-in-out linear step-start step-end steps(2, start) Чтобы посмотреть результат действия разных значений, наведите курсор на поле ниже. Время эффект перехода установлено как 3s. ease
ease-in
ease-out
ease-in-out
linear
step-start
step-end
steps(5, end)
cubic-bezier(0.1, -0.6, 0.2, 0)
Пример HTML5CSS3IE 10+CrOpSaFx
Объектная модель[window.]document.getElementById("elementID").style.transitionTimingFunction БраузерыChrome до версии 26.0, Safari и iOS поддерживают нестандартное свойство -webkit-transition-timing-function. Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-timing-function. Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-timing-function. Safari поддерживает значение steps только с версии 5.1. Перейти обратно к новости |