Важно знать: данная функция недоступна в IE9 и более старых версиях браузера.
Свойство 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" |
| Значение | Описание |
| Определяет, для какого именно CSS-свойства будет работать плавный переход. |
| Устанавливает длительность анимации в секундах (s) или миллисекундах (ms). |
| Задаёт кривую скорости, которая влияет на динамику изменения. |
| Определяет момент начала эффекта перехода (задержку). |
Пример !DOCTYPE html html head meta charset="utf-8" titleНазвание документа/title style div { width: 100px; height: 100px; background-color: red; transition: width 3s; } div:hover { width: 600px; } /style /head body div/div pНаведите на красный квадрат, чтобы увидеть эффект перехода./p /body /html А вот и результат работы нашего примера: