English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Метод использования и примеры свойств transition-property CSS3

Свойство transition-property CSS определяет имена CSS-свойств, к которым применяется эффект перехода.

В таблице ниже приведено описание использования и истории версий этого свойства, а также синтаксис использования этого свойства в скриптах JavaScript.

Значение по умолчанию:all
Подходит для:Все элементы ::before и ::after Декоративные элементы
Наследование:Нет
Анимируемые:Нет.См. также Свойства анимации.
Версия: Новые возможности CSS3
Синтаксис JavaScript:объект.style.transitionProperty="width,height"

Синтаксис использования transition-property

Грамматика этого атрибута такая:

transition-property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is　a　CSS　property　name

Ниже приведен пример того, как использовать атрибут transition-property.

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}
Проверьте, чтобы увидеть‹/›

Значение атрибута

В таблице ниже описаны значения этого атрибута.

ЗначениеОписание
noneНет атрибутов будут получать эффекты перехода.
allВсе атрибуты будут получать эффекты перехода. Это значение по умолчанию.
initialУстановить этот атрибут в его значение по умолчанию.
inheritЕсли указано, то связанный элемент использует значение атрибута transition-property родительского элемента.

Совместимость браузеров

Совместимость браузеров для атрибута transition-property, числа в таблице представляют собой минимальную версию браузера, поддерживающего этот атрибут; все основные браузеры поддерживают этот атрибут.

  • Firefox 4+ -moz-, 16 +

  • Google Chrome 4+ -webkit-, 26 +

  • Internet Explorer 10+

  • Apple Safari 3.1+ -webkit-, 6.1+

  • Opera 10.5+ -o-, 12.1+

Дополнительное чтение

Пожалуйста, обратитесь к следующим учебникам:CSS3 Transitions.

Связанные атрибуты:transition,transition-delay,transition-duration,transition-timing-function.

Свойство transition-timing-function в CSS3Свойство transition-duration в CSS3