css властивість transition-timing-function
Властивість transition-timing-function встановлює не лінійну швидкість ефекту переходу, іншими словами, ця властивість задає криву, по якій буде змінюватись значення, що відслідковується.
Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, при цьому функція по осі ординат може перевищувати ці значення в більшу або меншу сторони. В якості значень можна використовувати як ключові слова, так і спеціальні часові функції.
Ви також можете задавати одночасно декілька значень, відділяючи їх комами. Кожна з них буде задана автоматично для відповідної властивості у transition-property, по-черзі. Зайві значення ігноруватимуться. Якщо для властивості не вистачає значення, або не задана transition-timing-function, вона приймає значення без задання: ease.
На цьому прикладі Ви бачите два блоки. Для лівого задана 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;Властивість transition-timing-function може отримувати 11 значень:
linearСтала швидкість від початку і до кінця ефекту.
easeАнімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно
cubic-bezier (0.25,0.1,0.25,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(int,start|end)Ступінчаста функція, що має задане число кроків.
cubic-bezier(n,n,n,n)Задає функцію руху у вигляді кривої Безьє.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | ease |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transitionTimingFunction="linear" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| transition-timing-function | 26.0 |
10.0 |
16.0 |
6.1 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transition-timing-function | 4.4 |
16.0 |
3.2 -webkit- |
Мобільних переглядачів ще не додано.
Приклади
Демонстрації впливу різних значень властивості на елементи
Простий приклад роботи властивості
Ефект перетворення із постійною функцією часу від початку до кінця
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}