transition-property

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

Все свойства будут отслеживаться.

<свойство>

Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Пример

<!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.

Категория: Анимация