html.okpython.net
Основы создания сайтов
CSS :: Свойство transition-property
css-свойство transition-property (от англ. transition property – свойство с эффектом перехода) указывает имя свойства, для которого будет использоваться переходный эффект при изменении его значения.
Характеристики
- Значение по умолчанию: all.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.transitionProperty="value".
Синтаксис
transition-property: none || all || <имя свойства> [, <имя свойства>, ...]
Значения
- Список имен css-свойств, для которых будет использоваться переходный эффект в случае изменения их значений. Имена должны перечисляться через запятую.
- all – эффект перехода будет использован для всех анимируемых свойств.
- none – эффект перехода не используется.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-transitions-1/#propdef-transition-property
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/transition-property
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 2em; overflow: hidden; white-space: nowrap; padding: 1em; width: 200px; height: 50px; border: solid 4px red; cursor: pointer; } /* Задаем общие параметры перехода */ .tran{ transition-delay: 0.1s; transition-timing-function: ease; transition-duration: 4s; } /* Задаем свойства для перехода */ .tran_property_1{ transition-property: width; } .tran_property_2{ transition-property: width, background-color; } .tran_property_3{ transition-property: all; } /* Будут изменяться три свойства */ div.tran:hover{ background-color: #0000ff; width: 400px; height: 100px; } </style> </head> <body> <div>Наведите курсор на блоки!</div> <div class="tran tran_property_1"> transition-property: width<br> background-color - мгновенно<br> height - мгновенно </div> <div class="tran tran_property_2"> transition-property: width, background-color<br> height - мгновенно </div> <div class="tran tran_property_3"> transition-property: all<br> (можно не задавать) </div> </body> </html>
Пример №1