Примечание: в браузерах IE9 и более ранних версиях данная функциональность не поддерживается.
Свойство transition-property указывает CSS-свойство, к которому будет применён эффект перехода. Переход запускается, когда значение этого свойства меняется в различных состояниях элемента – например, при использовании псевдо-классов :hover и :active.
Если вы указываете свойство, которое включает другие значения, как background, то эффект будет применён ко всем анимируемым свойствам этого свойства.
Примечание: обязательно задавайте transition-duration; если его не указать, продолжительность станет 0 и переход исчезнет.
| Значение по умолчанию: | all |
|---|
| Наследуется: | нет |
|---|
| Версия: | CSS3 |
|---|
| Синтаксис JavaScript: | object.style.transitionProperty="width,height" |
|---|
| Значение | Описание |
|---|
| none | Никакое свойство не будет анимироваться. |
| all | Все возможные для анимации свойства получат эффект перехода. |
| свойство | Укажите список CSS-свойств через запятую – только они будут подвергаться переходу, когда их значения изменятся. |
Пример!DOCTYPE htmlhtmlhead meta charset="utf-8" titleНазвание документа/title style div { width: 100px; height: 100px; background-color: red; transition-property: width; transition-duration: 3s; } div:hover { width: 600px; } /style/headbody div/div pНаведите на красный квадрат, чтобы увидеть эффект перехода./p/body/htmlРезультат данного примера: