Свойство transition-property устанавливает свойство, которое будет анимироваться плавным переходом transition. Значением следует передавать имя CSS свойства, которое будет анимироваться. Если задать значение all (оно задано по умолчанию) - будут анимированы все свойства сразу.
Синтаксис
селектор {
transition-property: значение;
}
Пример
Наведите мышкой на блок - он плавно изменит свою ширину, так как transition-property имеет значение width:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Пример . Значение all
В данном примере transition-property имеет значение all - поэтому плавно изменяться будут все свойства, написанные для состояния hover (в нашем случае это width и height). Все изменения будут проходить за одно время, которое задано в transition-duration:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: all;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
:
Смотрите также
-
свойство transition-duration,
которое задает длительность плавного перехода -
свойство transition-delay,
которое задает задержку перед плавным переходом -
свойство transition-timing-function,
которое задает временную функцию для плавного перехода -
свойство transition,
которое является сокращением для плавного перехода -
свойство animation,
с помощью которого можно сделать анимацию