Важно знать: Обратите внимание, что это свойство не функционирует в Internet Explorer 9 и более старых версиях браузера.
Параметр transition-property позволяет вам точно указать, для какого именно CSS-свойства должен сработать плавный анимационный эффект. Этот механизм активируется в тот момент, когда значение выбранного свойства меняется под воздействием различных состояний элемента - например, при наведении курсора (:hover) или активации (:active).
Если вы зададите составное свойство, которое включает в себя другие параметры (типа background), то эффект перехода автоматически распространится на все входящие в него компоненты, которые поддерживают анимацию. Это очень удобно для комплексных изменений!
Совет: Не забывайте обязательно прописывать значение свойства transition-duration! Если вы его опустите, длительность перехода по умолчанию станет равна 0, и вся ваша работа останется незамеченной.
| Значение по умолчанию: | all |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionProperty="width,height" |
| Значение | Описание |
| none | Эффект перехода не применяется ни к одному свойству. |
| all | Анимация будет доступна для всех свойств, которые технически поддерживают переходы. |
| свойство | Перечислите через запятую конкретные CSS-параметры, значения которых должны меняться плавно при изменении их состояния. |
Пример !DOCTYPE html html head 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 /head body div/div pНаведите на красный квадрат, чтобы увидеть эффект перехода./p /body /html Так выглядит результат работы этого кода: