| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 10.0 + | 1.0 + | 26.0 + | 11.6 + | 12.10 + | 3.0 + | 4.0 + | 16.0 + | 2.1 | 2.0 + |
Коротка інформація
| Значення за умовчанням | all |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів, до псевдоелементи :: before і :: after |
| посилання на специфікацію | http://dev.w3.org/csswg/css-transitions/#transition-property |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює ім'я стильової властивості, значення якого буде відслідковуватися для з будівлі ефекту переходу.
Синтаксис
transition-property: none | all | <властивість> [, <властивість> ] *
Значення
- none
- Ніяке властивість не задано.
- all
- Все властивості будуть відслідковуватися.
- <властивість>
- Назва стильової властивості, регістр при його написанні не враховується . При вказівці декількох властивостей вони перераховуються один за одним через кому.
Приклад
HTML5 CSS3 IE 10 + Cr Op Sa Fx
<!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; /* Анімація */ -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; transition-property: top; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } .Menu: hover {top: 0; } </style>
</head>
<body>
<div class="menu">
А тут у нас буде своє меню з преферанс і Профурсетка. </div>
</body>
</html>
В даному прикладі при наведенні курсору на блок він плавно змінює своє положення.
Об'єктна модель
[window.] document.getElementById (" elementID "). style.transitionProperty
Браузери
Chrome до версії 26.0, Safari, Android і iOS підтримують нестандартне властивість - webkit-transition-property .
Opera до версії 12.10 підтримує нестандартне властивість -o-transition-property .
Firefox до версії 16.0 підтримує нестандартне властивість - moz-transition-property .