Свойство transition-property

Описание

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Синтаксис

transition-property: none | all | свойство;
Значение Описание
none Никакое свойство не задано.
all Все свойства будут отслеживаться.
свойство Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='test'></div>
 <style>
 #test {
 width: 150px;
 height: 150px;
 background-color: rgb(112, 0, 0);
 transition: all 1s ease-in-out;
 transition-property: opacity;
 margin: 10px;
 }
 #test:hover {
 transform: rotate(90deg);
 opacity: 0;
 }
 </style>
</body>
</html>

Читайте также

Свойство word-wrap

Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

Свойство align-content

Указывает, как выравниваться строкам внутри флекс - контейнера по поперечной оси при условии, что...

Свойство overflow

Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за ...

Свойство text-ident

Устанавливает величину отступа первой строки блока текста (например, для абзаца p). Воздействия н...

Свойство column-count

Определяет количество колонок в многоколоночном тексте.