| 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
- Все свойства будут отслеживаться.
- <свойство>
- Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!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.
Категория: