transition-property¶
Свойство transition-property
устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
Синтаксис¶
/* Keyword values */ transition-property: none; transition-property: all; transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; transition-property: test1; transition-property: test1, animation4; transition-property: all, height, all; transition-property: all, -moz-specific, sliding; /* Global values */ transition-property: inherit; transition-property: initial; transition-property: unset;
Значения¶
none
- Никакое свойство не задано.
all
- Все свойства будут отслеживаться.
<свойство>
- Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
Примечание¶
- Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство
-webkit-transition-property
. - Opera до версии 12.10 поддерживает свойство
-o-transition-property
. - Firefox до версии 16 поддерживает свойство
-moz-transition-property
.
Значение по-умолчанию: all
Применяется ко всем элементам, к псевдоэлементам ::before
и ::after
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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>