Встановлює, наскільки швидко має змінюватися значення стильової властивості для якого застосовується ефект переходу.
transition-timing-function являє собою математичну функцію, яка показує, як швидко змінюється вказане через transition-property значення якості. Початкова точка має координати 0.0, 0.0, кінцева — 1.0, 1.0, при цьому функція по осі ординат може перевищувати ці значення у більшу або меншу сторону (рис. 1).
Рис . 1. Вигляд функції
Коротка інформація
Значення за замовчуванням | ease |
---|---|
Успадковується | Ні |
Застосовується | До всіх елементів, до псевдоелементів ::before та ::after |
Анімується | Ні |
Синтаксис
<code>transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps | cubic-bezier
Позначення
Опис | Приклад | |
---|---|---|
<тип> | Вказує тип значення. | <розмір> |
A && B | Значення повинні виводитися у зазначеному порядку. | <розмір> && <колір> |
A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
[ ] | Групує значення. | [ crop || cross ] |
* | Повторювати нуль або більше разів. | [,<час>]* |
+ | Повторювати один або більше разів. | <число>+ |
? | Вказаний тип, слово або група не є обов'язковим. | inset? |
{A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
# | Повторювати один або більше разів через кому. | <час># |
Значення
transition-timing-function: steps(<число>, start | end)
ease ease-in ease-out ease-in-out linear step-start step-end steps(2, start)
Щоб переглянути результат дії різних значень, наведіть курсор на поле нижче. Час ефекту переходу встановлено як 3s.