пример
Наведите указатель мыши на <div> элемент, и изменить ширину с плавным переходом эффекта:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство переходного свойство задает имя свойства CSS эффект перехода для (the transition effect will start when the specified CSS property changes) , (the transition effect will start when the specified CSS property changes) .
Tip: Переход эффект может обычно возникают , когда пользователь парить над элементом.
Note: Всегда указывайте свойство переходной продолжительности, в противном случае длительность равна 0, а переход не будет иметь никакого эффекта.
| Значение по умолчанию: | all |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.transitionProperty="width,height" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -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 -о- |
CSS Синтаксис
transition-property: none|all|property|initial|inherit;Значения свойств
| Стоимость | Описание |
|---|---|
| none | Никакая собственность не получит эффект перехода |
| all | Значение по умолчанию. Все свойства будут получать эффект перехода |
| property | Определяет разделенный запятыми список имен свойств CSS эффект перехода для |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Наведите указатель мыши на <div> элемент, а также изменить ширину и высоту с плавным переходом эффекта:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Попробуй сам " Похожие страницы
Учебник CSS: CSS3 Transitions
HTML DOM ссылка: transitionProperty property