мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство transition-property

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