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`

Зображення графіків роботи значень властивості зображено на рисунку нижче.

Властивість `transition-timing-function`

Нотатка:

Завжди вказуйте властивість transition-duration, якщо цього не зробити тривалість переходу буде 0s, тому перехід не матиме ніякого ефекту.

Синтаксис

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
1.0 -webkit-

10.0

16.0
4.0 -moz-

6.1
3.0 -webkit-

12.10
11.6 -o-

12.0

Переглядач
transition-timing-function

4.4
2.1 -webkit-

16.0
4.0 -moz-

3.2 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Демонстрації впливу різних значень властивості на елементи

Простий приклад роботи властивості

Ефект перетворення із постійною функцією часу від початку до кінця

div { 


  -webkit-transition-timing-function: linear; /* Safari and Chrome */ 


  transition-timing-function: linear; 


} 

Додаткові посилання