transition

Всі властивості переходу можна поєднати в одну складову властивість transition transition: [property] [duration] [timing-function] [delay]

Якщо анімується кілька властивостей, то набір значень кожної з них розділяється комою. Необхідно обов'язково вказати властивість та час переходу. Функцію часу та затримку можна не вказувати — тоді для них буде використано значення за замовчуванням.

body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
border-radius: 10px;
background-color: tomato;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
/* We set the transition values. */
transition: background-color 500ms linear, transform 500ms ease-in-out;
}
/* When hovering, we change the values of the animated properties. */
.box:hover {
background-color: teal;
transform: rotate(180deg);
}