Свойство transition-property

Свойство transition-property устанавливает свойство, которое будет анимироваться плавным переходом transition. Значением следует передавать имя CSS свойства, которое будет анимироваться. Если задать значение all (оно задано по умолчанию) - будут анимированы все свойства сразу.

Синтаксис

cssселектор {
  transition-property: значение;
}

Пример

Наведите мышкой на блок - он плавно изменит свою ширину, так как transition-property имеет значение width:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Смотрите также