Свойство transitionTimingFunction
Пример style.transitionTimingFunction
Измените кривую скорости эффекта перехода:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Попробуйте сами »
Описание transitionTimingFunction
Свойство transitionTimingFunction определяет кривую скорости эффекта перехода.
Это свойство позволяет эффекту перехода изменять скорость в течение его продолжительности.
Поддержка transitionTimingFunction
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данное свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| transitionTimingFunction | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Синтаксис transitionTimingFunction
Вернуть свойство transitionTimingFunction:
object.style.transitionTimingFunction
Установите свойство transitionTimingFunction:
object.style.transitionTimingFunction = "ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Значение свойства transitionTimingFunction
| Значение | Описание |
|---|---|
| ease | Значение по умолчанию. Задает эффект перехода с медленным началом, затем быстрым, затем медленным окончанием (эквивалент cubic-bezier(0.25, 0.1, 0.25, 1)) |
| linear | Задает эффект перехода с одинаковой скоростью от начала до конца (эквивалент cubic-bezier(0, 0, 1, 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) | Определите собственные значения в функции cubic-bezier. Возможные значения — числовые значения от 0 до 1 |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали transitionTimingFunction
| Значение по умолчанию: | ease |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство функции времени перехода элемента. |
| CSS Версия | CSS3 |
Связанные страницы transitionTimingFunction
CSS Справочник: Свойство transition-timing-function