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); }