Вы здесь

CSS свойство transition-property

Свойство transition-property определяет CSS свойство, для которого будет применён эффект перехода. Этот эффект начинается, когда значение указанного свойства изменяется с помощью различных состояний элемента, например при использовании псевдоклассов :hover и :active.

Если указывается свойство, которое содержит значения других свойств, например background, то ко всем свойствам, которые могут быть анимированы, будет применён эффект перехода.

Примечание: Следует всегда указывать значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.

CSS синтаксис

transition-property: none | all | свойство | initial | inherit;

Возможные значения

Значение Описание
none Нет свойства, для которого будет применён эффект перехода.
all Значение по умолчанию. Все свойства, которые могут анимироваться, получат эффект перехода.
свойство Определяет список CSS свойств, записанных через запятую, для которых будет применён эффект перехода.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

При наведении мышки на элемент <div>, он должен менять свою ширину при помощи плавного эффекта перехода


div {
     -webkit-transition-property: width; /* Safari */
    transition-property: width;
}

div:hover {
    width: 300px;
}