CSS приклад: transition-timing-function

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+4.0+26.0+10.5+12.10+3.0+4.0+16.0+4.02.0+

Коротка інформація

Значення за замовчуванням ease
НаслідуєтьсяНі
ЗастосовуєтьсяДо всіх елементів, до псевдоелементів ::before і ::after
Посилання на специфікацію http://dev.w3.org/csswg/css3-transitions/#transition-timing-function

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Встановлює, наскільки швидко має змінюватися значення стилів для яких застосовується ефект переходу.

transition-timing-function представляє собою математичну функцію, що показує, як швидко за часом змінюється вказане через transition-property значення властивості. Початкова точка має координати 0.0, 0.0, кінцева — 1.0, 1.0, при цьому функція по осі ординат може перевищувати ці значення у більшу або меншу сторону (рис. 1).

Рис. 1. Вигляд функції

Синтаксис

transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|steps|cubic-bezier

Значення

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).
linear
Рівна швидкість від початку і до кінця.
step-start
Як такої анімації немає. Стилеві властивості одразу приймають кінцеве значення.
step-end
Як такої анімації немає. Стилеві властивості знаходяться в початковому значенні заданий час, після чого одразу приймають кінцеве значення.
steps
Сходинкова функція, що має задану кількість кроків.

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

 
Тут: <число> — ціле число більше нуля; start — задає полунеперервну знизу функцію; end — задає полунеперервну зверху функцію.
 
cubic-bezier
Задає функцію руху у вигляді кривої Безьє.

Браузери

Chrome до версії 26.0, Safari і iOS підтримують нестандартну властивість -webkit-transition-timing-function.

Opera до версії 12.10 підтримує нестандартну властивість -o-transition-timing-function.

Firefox до версії 16.0 підтримує нестандартну властивість -moz-transition-timing-function.

Safari підтримує значення steps лише з версії 5.1.

Анімація

Часті запитання

  • Q: Як використовувати transition-timing-function в CSS?

    A: transition-timing-function вказує на спосіб, яким зміна між двома станами анімації буде відбуватися по часу.

  • Q: Де використовують transition-timing-function в CSS?

    A: transition-timing-function використовують у CSS для задання швидкості, з якою анімація переходить від початкового стану до кінцевого.

  • Q: Які значення можна використовувати для transition-timing-function в CSS?

    A: Значення, які можна використовувати для transition-timing-function в CSS, включають ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier.

  • Q: Як змінюється анімація залежно від значення transition-timing-function в CSS?

    A: Зміна значення transition-timing-function впливає на швидкість та характер переходу між станами елементів у CSS анімації.

  • Q: Чому важливо використовувати transition-timing-function в CSS?

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