Чтобы указать несколько переходов для нескольких свойств в свойстве CSS transition, вы можете использовать список значений перехода, разделенный запятыми. Каждое значение перехода состоит из свойства, которое вы хотите анимировать, продолжительности перехода, функции плавности и необязательной задержки.

Вот пример того, как можно указать несколько переходов для нескольких свойств:

.element {
  transition: property1 duration1 easing1 delay1, property2 duration2 easing2 delay2, ...;
}

В приведенном выше примере property1, property2и т. д. представляют свойства CSS, которые вы хотите анимировать, например width, height, background-colorи т. д. duration1, duration2и т. д. обозначают длительность переходов в секундах. или миллисекунды. easing1, easing2и т. д. представляют функции плавности, которые управляют ускорением и замедлением перехода. delay1, delay2и т. д. обозначают необязательные задержки перед началом переходов.

Вот конкретный пример:

.element {
  transition: width 1s ease-in, height 0.5s ease-out 0.2s, background-color 2s linear;
}

В приведенном выше примере свойство widthбудет переходить в течение 1 секунды с функцией замедления ease-in. Свойство heightбудет переходить в течение 0,5 секунды с функцией замедления ease-outи задержкой 0,2 секунды. Свойство background-colorбудет изменяться в течение 2 секунд с помощью функции линейного замедления.