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

Властивість transition-timing-function встановлює не лінійну швидкість ефекту переходу, іншими словами, ця властивість задає криву, по якій буде змінюватись значення, що відслідковується.

Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, при цьому функція по осі ординат може перевищувати ці значення в більшу або меншу сторони. В якості значень можна використовувати як ключові слова, так і спеціальні часові функції.

Ви також можете задавати одночасно декілька значень, відділяючи їх комами. Кожна з них буде задана автоматично для відповідної властивості у transition-property, по-черзі. Зайві значення ігноруватимуться. Якщо для властивості не вистачає значення, або не задана transition-timing-function, вона приймає значення без задання: ease.

На цьому прикладі Ви бачите два блоки. Для лівого задана CSS-функція, для того, що праворуч - ключове слово, яке означає "однакові зміни протягом усього часу":

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

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Стала швидкість від початку і до кінця ефекту.

автор: Svitlana

правити

ease

Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно cubic-bezier (0.25,0.1,0.25,1). Без задання.

автор: Svitlana

правити

ease-in

Анімація починається повільно, а до кінця прискорюється. Аналогічно cubic-bezier(0.42,0,1,1).

автор: Svitlana

правити

ease-out

Анімація починається швидко, а до кінця сповільнюється. Аналогічно cubic-bezier(0,0,0.58,1).

автор: Svitlana

правити

ease-in-out

Анімація починається і закінчується повільно. Аналогічно cubic-bezier(0.42,0,0.58,1).

автор: Svitlana

правити

step-start

Анімації немає. Стильові властивості відразу ж приймають кінцеве значення.

автор: Svitlana

правити

step-end

Як такої анімації немає. Початкове значення перебуває в початковому значенні увесь час переходу і в останнівй момент приймає кінцеве значення.

автор: Svitlana

правити

steps(int,start|end)

Ступінчаста функція, що має задане число кроків.

автор: Svitlana

правити

cubic-bezier(n,n,n,n)

Задає функцію руху у вигляді кривої Безьє.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
transition-timing-function	26.0 <br> 1.0 -webkit-	16.0 <br> 4.0 -moz-	6.1 <br> 3.0 -webkit-	12.10 <br> 11.6 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
transition-timing-function	4.4 <br> 2.1 -webkit-	16.0 <br> 4.0 -moz-	3.2 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="track">
    <div class="lin">linear</div>
    <div class="eas">ease</div>
</div>
<p>Наведи курсор на смугу вище.</p>

.track div {
    width: 100px;
    padding: 6px;
    margin-bottom: 6px;
    background: #0172ad;
    color: #fff;
    transition: width 2s;
}

.track:hover div {
    width: 300px;
}

.lin { transition-timing-function: linear; }
.eas { transition-timing-function: ease; }