CSS свойство transition-timing-function используется для описания того, как расчитываются промежуточные значения определённого CSS свойства, т.е. анимация перехода происходит с разной промежуточной скоростью за определённое время, например, анимация начинается медленно, затем ускоряется и в конце опять замедляется. Свойство использует математическую функцию, называемую кубической кривой Безье, чтобы сделать кривую скорости. Функции можно передать собственные значения, или использовать предопределённые ключевые слова. Допускается указывать более одного значения, через запятую. Каждое новое значение применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список значений меньше, чем количество свойств в transition-property, значения для оставшихся свойств начнут применяться по второму кругу. Если список значений больше, чем указано свойств, то список просто усекается до нужного количества значений. | Значение по умолчанию: | ease | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.transitionTimingFunction="linear" | | Значение | Описание | | 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 числовых аргумента - числа с плавающей точкой. |
|