HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут transition-timing-function в CSS

Атрибут transition-timing-function в CSS

1833

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

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

Вигляд функції

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

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

Значення за замовчуванням ease
Успадковується Ні
Застосовується До всіх елементів, до псевдоелементів ::before та ::after
Анімується Ні

Синтаксис 

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

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися у зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно 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
Як такої анімації немає. Стилеві властивості знаходяться в початковому значенні заданий час, потім відразу ж приймають кінцеве значення.

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

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

ease

ease

ease-in

ease-in

ease-out

ease-out

ease-in-out

ease-in-out

linear

linear

step-start

step-start

step-start

step-end

steps

steps(2, start)

Щоб переглянути результат дії різних значень, наведіть курсор на поле нижче. Час ефекту переходу встановлено як 3s.

ease
ease-in
ease-out
ease-in-out
linear
step-start
step-end
steps(5, end)
cubic-bezier(0.1,-0.6, 0.2, 0)

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-timing-function</title> <style> .progress { background: #333; /* Фон */
Border: 2px solid #333; /* Рамка */
height: 20px; /* Висота */
position: relative; /* Відносне позиціонування */
} 
.progress:hover::before{ width: 100%; } 
.progress::before{ transition-timing-function: linear; transition-duration: 5s; content: '; position: absolute; /* Абсолютне позиціонування */
height: 100%; width: 0; background: #FFA600; /* Фон */
}
</style>
</head>
<body> <div class="progress"></div>
</body>
</html>

Об'єктна модель

Об'єкт.style.transitionTimingFunction

Примітка

Chrome до версії 26, Safari до версії 6.1 та Android до 4.4 підтримують властивість -webkit-transition-timing-function.

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

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

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

Специфікація

Специфікація Статус
CSS Transitions Робочий проект

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація)— група, що відповідає за стандарт, задоволений а, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту. на розгляд Консультативної ради W3C для остаточного затвердження.
  • Working Draft (Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
  • Editor draft (Редакторська чернетка) — чорнова версія стандарту після внесення правок редакторами проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

10 12 1 26 11.6 12.10 3 6.1 4 16
2.1 4.4 4 16 10 12.10 3.2

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.

Число вказує версію браузера, починаючи з якої властивість підтримується.

Анімація
© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS