CSS transition-property Свойство
Пример
Наведите курсор на элемент <div> и измените ширину с эффектом плавного перехода:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Подробнее примеры ниже.
Определение и использование
Свойство transition-property
указывает имя свойства CSS, для которого используется эффект перехода (эффект перехода начнется при изменении заданного свойства CSS).
Совет: Эффект перехода обычно возникает, когда пользователь наводит курсор на элемент.
Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность равна 0, а переход не будет иметь эффекта.
Значение по умолчанию: | all |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.transitionProperty="width,height" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -WebKit-, -МОЗ- или -o- укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
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;
Значения свойств
Значение | Описание |
---|---|
none | Ни одно свойство не получит эффект перехода |
all | Значение по умолчанию. Все свойства получат эффект перехода |
property | Определяет разделенный запятыми список имен свойств CSS, эффект перехода для |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Наведите курсор на элемент <div> и измените ширину и высоту с помощью эффекта плавного перехода:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Похожие страницы
CSS Справочник: CSS Transitions
HTML DOM Справочник: transitionProperty Свойство