Свойство transition-property - свойство, которое будет анимироваться плавным переходом transition
Свойство 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,
с помощью которого можно сделать анимацию