CSS transition-timing-function Свойство
Пример
Эффект перехода с той же скоростью от начала до конца:
div {
transition-timing-function: linear;
}
Определение и использование
Свойство transition-timing-function указывает кривую скорости эффекта перехода.
Это свойство позволяет эффект перехода изменить скорость по его длительности.
| Значение по умолчанию: | ease |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionTimingFunction="linear" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -WebKit-, -МОЗ- или -o- укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Синтаксис CSS
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Значения свойств
| Значение | Описание |
|---|---|
| ease | Значение по умолчанию. Задает эффект перехода с медленным запуском, затем быстро, затем заканчивается медленно (эквивалентно кубической кривой Безье (0.25, 0.1, 0.25, 1)) |
| linear | Задает эффект перехода с одинаковой скоростью от начала до конца (эквивалентно кубической кривой Безье (0, 0, 1, 1)) |
| ease-in | Задает эффект перехода с медленным началом (эквивалентно кубической кривой Безье (0.42, 0, 1, 1)) |
| ease-out | Задает эффект перехода с медленным концом (эквивалентно кубической кривой Безье (0, 0, 0.58)) |
| ease-in-out | Задает эффект перехода с медленным началом и концом (эквивалентно кубической кривой Безье (0.42, 0, 0.58, 1)) |
| step-start | Эквивалентно шагам (1, запуск) |
| step-end | Эквивалентно шагам (1, конец) |
| steps(int,start|end) | Задает функцию степпинга с двумя параметрами. Первый параметр указывает количество интервалов в функции. Оно должно быть положительным целым числом (больше 0). Второй параметр, который является необязательным, является либо значением "Start" или "End", и указывает точку, в которой изменение значений происходит в интервале. Если второй параметр опущен, ему дается значение "End" |
| cubic-bezier(n,n,n,n) | Определите собственные значения в функции кубической Безье. Возможные значения — это числовые значения от 0 до 1 |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Совет: Попробуйте различные значения в приведенных ниже примерах, чтобы понять, как это работает!
Другие примеры
Пример
Чтобы лучше понять различные значения функций: Вот пять различных элементов div с пятью различными значениями:
#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;}
Пример
То же, что и в примере выше, но кривые скорости задаются с помощью функции кубической Безье:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Похожие страницы
CSS Справочник: CSS Transitions
HTML DOM Справочник: transitionTimingFunction Свойство