transition-property
Поддержка браузерами
12.0+ | 10.0+ | 16.0+ | 26.0+ | 12.1+ | 6.1+ |
Описание
CSS свойство transition-property указывает CSS-свойство, для которого будет применён эффект перехода. Этот эффект начинается, когда значение указанного свойства изменяется с помощью различных состояний элемента, например при использовании псевдо-классов :hover и :active.
Если указывается свойство, которое содержит значения других свойств, например background, то ко всем свойствам, которые могут быть анимированы, будет применён эффект перехода.
Примечание: всегда указывайте значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.
Значение по умолчанию: | all |
---|---|
Применяется: | ко всем элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.transitionProperty="width,height" |
Синтаксис
transition-property: none|all|свойство|inherit;
Значения свойства
Значение | Описание |
---|---|
none | Нет свойства, для которого будет применён эффект перехода. |
all | Все свойства, которые могут анимироваться, получат эффект перехода. |
свойство | Определяет CSS-свойства через запятую, для которых будет применён эффект перехода, когда будут изменены значения указанных свойств. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!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>
Результат данного примера:
Наведите на красный квадрат, чтобы увидеть эффект перехода.