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