transition-timing-function
Поддержка браузерами
12.0+ | 10.0+ | 16.0+ | 26.0+ | 12.1+ | 6.1+ |
Описание
CSS свойство transition-timing-function используется для описания того, как расчитываются промежуточные значения определённого CSS свойства, т.е. анимация перехода происходит с разной промежуточной скоростью за определённое время, например, анимация начинается медленно, затем ускоряется и в конце опять замедляется.
Свойство использует математическую функцию, называемую кубической кривой Безье, чтобы сделать кривую скорости. Функции можно передать собственные значения, или использовать предопределённые ключевые слова.
Допускается указывать более одного значения, через запятую. Каждое новое значение применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список значений меньше, чем количество свойств в transition-property, значения для оставшихся свойств начнут применяться по второму кругу. Если список значений больше, чем указано свойств, то список просто усекается до нужного количества значений.
Значение по умолчанию: | ease |
---|---|
Применяется: | ко всем элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.transitionTimingFunction="linear" |
Синтаксис
transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|inherit;
Значения свойства
Значение | Описание |
---|---|
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). |
step-start | Плавная анимация отсутствует. Определённые свойства сразу принимают конечное значение. Если используется данное значение, то указывать продолжительность анимации перехода не нужно, так как в этому случае она игнорируется. |
step-end | Плавная анимация отсутствует. Определённые свойства находятся в начальном состоянии, а когда заданное время (продолжительность) проходит, свойства сразу принимают конечное значение. В данном случае, если указана продолжительность, она действует как задержка перед изменением значения. |
steps(n, указание) | Ступенчатая функция, имеющая заданное число шагов. Она принимает два аргумента. Первый аргумент указывает количество шагов, за которое функция выполнит пошаговую анимацию, аргумент должен быть целым положительным числом. Второй аргумент является не обязательным, он должен быть одним из двух допустимых значений "start" или "end". Аргумент определяет момент интервала, в которой произойдёт конечное изменение значения свойства. Если указано значение "start" последний шаг будет выполнен к концу указанной продолжительности, если указано значение "end" последний шаг будет выполнен после указанной продолжительности для анимации перехода. Если второй аргумент не указан, по умолчанию будет использоваться значение "end". Эту функцию иногда называют "лестничной". |
cubic-bezier(n,n,n,n) | Математическая функция, определяющая, как быстро изменяется анимация перехода во время указанной продолжительности. Функция позволяет вручную установить значения для кривой ускорения. Она принимает 4 числовых аргумента - числа с плавающей точкой. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> .animation_box { border: 1px solid black; padding: 15px; margin: 20px; } .elem { background: red; color: white; width: 190px; padding: 5px 0 5px 0; text-indent: 5px; margin: 5px 0; transition: width 2s; } .animation_box:hover .elem { width: 100%; } </style> </head> <body> <p>Чтобы увидеть результат анимации перехода наведите курсор мыши на контейнер ниже.</p> <div class="animation_box"> <div class="elem" style="transition-timing-function: ease">ease</div> <div class="elem" style="transition-timing-function: linear">linear</div> <div class="elem" style="transition-timing-function: ease-in">ease-in</div> <div class="elem" style="transition-timing-function: ease-out">ease-out</div> <div class="elem" style="transition-timing-function: ease-in-out">ease-in-out</div> <div class="elem" style="transition-timing-function: step-start">step-start</div> <div class="elem" style="transition-timing-function: step-end">step-end</div> <div class="elem" style="transition-timing-function: steps(6, end)">steps(6, end)</div> <div class="elem" style="transition-timing-function: cubic-bezier(0, 1.2, 1, -0.6)">cubic-bezier(0, 1.2, 1, -0.6)</div> </div> </body> </html>
Результат данного примера:
Чтобы увидеть результат анимации перехода наведите курсор мыши на контейнер ниже.