transition
Поддержка браузерами
12.0+ | 10.0+ | 16.0+ | 26.0+ | 12.1+ | 6.1+ |
Описание
CSS свойство transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства, по существу это означает простейшую анимацию. Например, если ссылка должна менять цвет при наведении на неё курсора, то можно реализовать постепенный переход от одного цвета к другому, вместо моментального изменения. В обоих случаях будет осуществляться переход от одного цвета к другому, но с помощью transition переход можно сделать постепенным. Если браузер не предоставляет поддержку данного свойства, то изменение будет моментальным.
Свойство transition объявляется вместе с остальными стилями элемента. При каждом изменении значения свойства, указанного в качестве целевого, изменения будут происходить постепенно. Чаще всего transition применяется для плавного изменения вида элемента при наведении на него курсора, но также его можно применять совместно с JavaScript (например, если вид элемента был изменён путём добавления класса или иным образом).
Примечание: CSS свойство transition позволяет в одном объявлении устанавливать значения таких свойств, как transition-property, transition-duration, transition-timing-function, и transition-delay. Не забывайте всегда указывать значение для свойства transition-duration, так как, если не указать значение, то продолжительность перехода будет равна нулю и никакого эффекта не будет.
Значение по умолчанию: | all 0 ease 0 |
---|---|
Применяется: | ко всем элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.transition="width 2s" |
Синтаксис
transition: property duration timing-function delay|inherit;
Значения свойства
Значение | Описание |
---|---|
transition-property | Указывает CSS-свойство, для которого будет применён эффект перехода. |
transition-duration | Указывает, продолжительность эффекта перехода в секундах(s) или миллисекундах(ms). |
transition-timing-function | Задаёт кривую скорости для эффекта перехода. |
transition-delay | Указывает, когда начнётся эффект перехода. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!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>
Результат данного примера:
Наведите на красный квадрат, чтобы увидеть эффект перехода.