УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Свойство transition-property


CSS Справочник Полный CSS Справочник

Пример

Переместите указатель мыши над элементом div и измените его ширину с плавным эффектом перехода:

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari и Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

Попробуйте сами »
Еще примеры внизу этой страницы.

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство transition-property не поддерживается ни одним браузером.

Firefox 4 поддерживает альтернативное свойство -moz-transition-property.

Safari и Chrome поддерживают альтернативное свойство -webkit-transition-property.

Opera поддерживают альтернативное свойство -o-transition-property.


Определение и Использование

Свойство transition-property указывает название свойства CSS, на которое воздействует переход (эффект перехода начинается, когда указанное CSS свойство изменяется).

Совет: Эффект перехода обычно привязывают к перемещению указателя мыши над элементом.

Замечание: Всегда указывайте свойство transition-duration, иначе продолжительность равна 0 и эффекта перехода не будет.

Значение по умолчанию: all
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.transitionProperty="width,height"


Синтаксис

transition-property: none|all|свойство;

Значение Описание
none Никакое свойство не подвергается эффекту перехода
all Все свойства подвержены воздействию перехода
свойство Определяет список названий CSS свойств через запятую, на которые будет воздействовать эффект перехода


Примеры

Попробуйте сами - Примеры

Эффект перехода - изменение двух свойств
Переместите указатель мыши над элементом div и измените его ширину и высоту с плавным эффектом перехода.


CSS Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS