transition-timing-function
CSS свойство transition-timing-function
Поддержка браузеров
Firefox 4 поддерживает альтернативное свойство -moz-transition.
Safari и Chrome поддерживают альтернативное свойство -webkit-transition.
Opera поддерживает альтернативное свойство -o-transition.
Описание
Свойство transition-timing-function задает кривую скорости для эффекта трансформации.
В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.
Значение по умолчанию: | ease |
---|---|
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.transitionTimingFunction="linear" |
Значения свойства
Значение | Описание |
---|---|
linear |
Эффект трансформации проходит с одинаковой скоростью от начала до конца. (эквивалент cubic-bezier(0,0,1,1)). |
ease |
Скорость трансформации увеличивается к середине и снижается к окончанию. (эквивалент cubic-bezier(0.25,0.1,0.25,1)) |
ease-in |
Медленная скорость трансформации в начале. (эквивалент cubic-bezier(0.42,0,1,1)) |
ease-out |
Медленная скорость трансформации к окончанию. (эквивалент cubic-bezier(0,0,0.58,1)) |
ease-in-out |
Замедленная скорость в начале и конце трансформации. (эквивалент cubic-bezier(0.42,0,0.58,1)) |
cubic-bezier(n,n,n,n) | Определение собственных значений скорости. Возможные числовые значения 0 и 1. |
div { width:100px; height:50px; background:red; color:white; font-weight:bold; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari и Chrome */ -o-transition:width 2s; /* Opera */ } #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} /* Firefox 4: */ #div1 {-moz-transition-timing-function: linear;} #div2 {-moz-transition-timing-function: ease;} #div3 {-moz-transition-timing-function: ease-in;} #div4 {-moz-transition-timing-function: ease-out;} #div5 {-moz-transition-timing-function: ease-in-out;} /* Safari и Chrome: */ #div1 {-webkit-transition-timing-function: linear;} #div2 {-webkit-transition-timing-function: ease;} #div3 {-webkit-transition-timing-function: ease-in;} #div4 {-webkit-transition-timing-function: ease-out;} #div5 {-webkit-transition-timing-function: ease-in-out;} /* Opera: */ #div1 {-o-transition-timing-function: linear;} #div2 {-o-transition-timing-function: ease;} #div3 {-o-transition-timing-function: ease-in;} #div4 {-o-transition-timing-function: ease-out;} #div5 {-o-transition-timing-function: ease-in-out;} div:hover { width:500px; }