Примечание: не поддерживается в 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
Результат данного примера:
|