Свойство 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>

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