СSS Свойство transition-property
Пример
Наведите указатель мыши на элемент <div> и измените ширину с эффектом плавного перехода:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Редактор кода »
Определение и использование
Свойство transition-property свойство задает имя свойства CSS, для которого создается эффект перехода (эффект перехода запускается при изменении указанного свойства CSS).
Совет: Эффект перехода обычно возникает, когда пользователь наводит указатель мыши на элемент.
Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность равна 0, и переход не будет иметь никакого эффекта.
| Значение по умолчанию: | all |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.transitionProperty="width,height" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit-, -moz- или -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 Переходы
HTML DOM Справочник: Свойство transitionProperty
