CSS свойство перехода свойство
Пример
Наведите указатель мыши на элемент <div> и измените ширину с эффектом плавного перехода:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство transition-propertyуказывает имя свойства CSS, для которого предназначен эффект перехода (эффект перехода начнется при изменении указанного свойства CSS).
Совет: Эффект перехода обычно возникает, когда пользователь наводит курсор на элемент.
Примечание. Всегда указывайте свойство transition-duration , иначе продолжительность равна 0, и переход не будет иметь никакого эффекта.
| Значение по умолчанию: | все |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Читать об анимации |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.transitionProperty="ширина,высота" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| Property | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Синтаксис CSS
transition-property: none|all|property|initial|inherit;
Значения свойств
| Value | Description |
|---|---|
| none | No property will get a transition effect |
| all | Default value. All properties will get a transition effect |
| property | Defines a comma separated list of CSS property names the transition effect is for |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Наведите указатель мыши на элемент <div> и измените ширину И высоту с эффектом плавного перехода:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Связанные страницы
Учебное пособие по CSS: CSS-переходы
Справочник по HTML DOM: свойство transitionProperty