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

Властивість animation-timing-function визначає криву швидкості анімації кожного циклу між ключовими кадрами. В якості значень для властивості використовуються часові функції додані в CSS3.

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

На відмінну від @keyframe ця властивість впливає лише на демонстрацію циклів між ключовими кадрами, а не на анімацію цілком!

Наприклад, використовуючи часову функцію ease-in-out анімація буде повільно починатися, пришвидшуватися та повільно закінчуватися. І так кожен цикл демонстрації. Якщо animation-timing-function задана тільки для блоку @keyframe, то й впливає вона лише на цей ключовий кадр. В протилежному випадку властивість визначає криву швидкості всіх кадрів анімації.

На цьому прикладі ми бачимо два елементи. Для одного задана крива швидкості Безьє, для другого - залишено значення без задання linear, тобто однакову швидкість протягом кожного циклу:

правити

Нотатка

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

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

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

Синтаксис

animation-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;

Властивість animation-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-end

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

автор: Svitlana

правити

step-start

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

автор: Svitlana

правити

steps(int,start|end)

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

animation-timing-function: steps (<число>, start | end)

• <число> - ціле число більше нуля;
• start - задає напівбезперервна знизу функцію;
• end - задає напівбезперервна зверху функцію

автор: Svitlana

правити

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

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
animation-timing-function	43.0 <br> 3.0 -webkit-	16.0 <br> 3.0 -moz-	9.0 <br> 4.0 -webkit-	12.10 <br> 12.0 -o-	12.0	10.0

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

Переглядач
animation-timing-function	2.0 -webkit-	16.0 <br> 5.0 -moz-	9.2 <br> 4.0 -webkit-

Приклади

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

<div class="box linear">linear</div>
<div class="box ease">ease</div>

.box {
    width: 200px;
    padding: 8px;
    margin-bottom: 8px;
    color: #fff;
    position: relative;
    animation: mymove 3s infinite;
}

.linear {
    animation-timing-function: linear;
    background: #0172ad;
}

.ease {
    animation-timing-function: ease;
    background: #d81b60;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 160px; }
}