transition-property
CSS свойство transition-property
Поддержка браузеров
 |
 |
 |
 |
 |
 |
 |
|
|
|
Firefox 4 поддерживает альтернативное свойство -moz-transition.
Safari и Chrome поддерживают альтернативное свойство -webkit-transition.
Opera поддерживает альтернативное свойство -o-transition.
Описание
Свойство transition-property указывает название CSS свойства, для которого будет применен эффект трансформации (эффект трансформации начинается, когда указанное CSS свойство изменяется).
Обычно эффект трансформации происходит при проведении курсором мыши над элементом.
Всегда указывайте свойство transition-duration, иначе продолжительность будет равна 0 и ничего не произойдет.
| Значение по умолчанию: | all |
|---|---|
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionProperty="width,height" |
Значения свойства
| Значение | Описание |
|---|---|
| none | Свойство не получит эффект трансформации. |
| all | Все свойства получат эффект трансформации. |
| свойство | Определяет список названий CSS свойств через запятую, для которых будет применен эффект трансформации. |
div.primer{
width:100px;
height:50px;
background:#1aa5ca;
transition-property: height;
transition-duration: 2s;
-moz-transition-property: width, height; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari и Chrome */
-webkit-transition-duration: 2s; /* Safari и Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
div#p1:hover{
width: 600px;
height:200px;
}
