css.in.ua
Підтримати

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-timing-function`

Нотатка:

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

Синтаксис

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

Однакова швидкість від початку і до кінця

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-end

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

step-start

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

steps(int,start|end)

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

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

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

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

initial

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

inherit

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

Значення без задання: ease
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.animationTimingFunction="linear"

Переглядачі

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

43.0
3.0 -webkit-

10.0

16.0
3.0 -moz-

9.0
4.0 -webkit-

12.10
12.0 -o-

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

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-

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

Приклади


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

Простий приклад дії анімації

Вказує, що анімація буде тривати з одною швідкістю

div { 


  -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 


  animation-timing-function: linear; 


}

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

Документи

Зв'язок