Свойство transition-property в CSS
- предыдущая страница transition-duration
- следующая страница transition-timing-function
определение и использование
transition-property attribute определяет имя CSS-атрибута, к которому применяется эффект перехода (переход начинается при изменении указанного CSS-атрибута).
подсказка:переходы обычно происходят, когда пользователь ставит указатель мыши на элемент.
комментарий:всегда устанавливайте transition-duration если атрибут не задан, переход не будет производиться, если продолжительность равна 0.
еще см.:
CSS tutorial:Переход CSS
HTML DOM reference manual:transitionProperty attribute
пример
поставьте указатель мыши на элемент div, и произойдет平滑 переход к изменению ширины элемента:
div {
transition-property: width;
}
CSS syntax
transition-property: none|all|свойство;
значение свойства
| значение | описание |
|---|---|
| нет | никакие свойства не получают эффект перехода. |
| все | все свойства получают эффект перехода. |
| свойство | список имен CSS-атрибутов, которые применяются к эффекту перехода, разделенных запятыми. |
технические детали
| по умолчанию: | все |
|---|---|
| наследование: | нет |
| версия: | CSS3 |
| JavaScript syntax: | объект.style.transitionProperty="width,height" |
поддержка браузеров
числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
числа с префиксами -webkit-, -moz- или -o- указывают на первую версию, которая использует префикс.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
- предыдущая страница transition-duration
- следующая страница transition-timing-function
