Встановлює ім'я стильової властивості, значення якої буде відстежуватися для створення ефекту переходу.
Коротка інформація
| Значення за замовчуванням | all |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів, до псевдоелементів ::before та ::afte r |
| Анімується | Ні |
Синтаксис
<code>transition-property: none | all | <властивість> [,<властивість>]*
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у вказаному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- none
- Ніякої властивості не встановлено.
- all
- Всі властивості будуть відстежуватися.
- <властивість>
- Назва стильової властивості, регістр при його написанні не враховується. При вказанні декількох властивостей вони перераховуються одна за одною через кому.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-duration</title> <style> body { margin: 0; }
.menu { position: absolute; height: 100px; width: 100%; background: #fc0; border-bottom: 20px solid #333; top:-100px; /* Анімація */
transition-property: top; transition-duration: 2s; }
.menu:hover { top: 0; }
</style>
</head>
<body> <div class="menu"> А тут у нас буде своє меню з преферансом та профурсетками.
</div>
</body>
</html>У цьому прикладі при наведенні курсору на блок він плавно змінює своє положення.
Об'єктна модель
Об'єкт.style.transitionProperty
Примітка
Chrome до версії 26.0, Safari до версії 6.1 та Android до версії 4.4 підтримують властивість -webkit-transition-property.
Opera до версії 12.10 підтримує властивість -o-transition-property.
Firefox до версії 16 підтримує властивість -moz-transition-property.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Transitions | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's 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 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується; - — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації. modal>