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