Закрыть   X

  •    
  •    
Печать

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;
}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки