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;
}