Сокращённая запись CSS для переходов с несколькими свойствами?

Я успешно реализовал это с помощью следующего кода:

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

Этот код задает анимацию для высоты элемента с продолжительностью 3 секунды и эффектом ease-out, а также для ширины с продолжительностью 5 секунд и эффектом ease-in.

При установке задержки в 0.5 секунды для перехода по свойству opacity, элемент будет полностью прозрачным (и, следовательно, невидимым) в течение всего времени, пока происходит изменение его высоты. Таким образом, вы увидите только изменение opacity. Это приведет к тому, что вы получите тот же эффект, что и при отсутствии свойства высоты в переходе:

transition: opacity .5s .5s;

Это то, что вы хотите? Если нет, и вы хотите увидеть переход высоты, вам не следует устанавливать значение opacity в 0 на все время перехода.

Ваш вопрос касался анимации с использованием SCSS, и я рад, что это помогло вам понять, как упростить анимацию только для необходимых свойств. Вот исходный код с пояснениями:

// SCSS - Множественная анимация: свойства | продолжительности | и др.
// При наведении, анимируем div (ширина/непрозрачность) - от: {0px, 0} до: {100vw, 1}

.base {
  max-width: 0vw;   // Начальная ширина элемента
  opacity: 0;       // Начальная непрозрачность элемента

  transition-property: max-width, opacity; // Указываем порядок свойств для анимации
  transition-duration: 2s, 4s; // Время анимации для каждого свойства относительно порядка
  transition-delay: 6s; // Задержка перед началом анимации для всех свойств
  animation-timing-function: ease; // Функция тайминг анимации

  &:hover {
    max-width: 100vw; // Конечная ширина элемента при наведении
    opacity: 1;       // Конечная непрозрачность элемента при наведении

    transition-duration: 5s; // Время анимации для всех свойств при наведении
    transition-delay: 2s, 7s; // Задержка перед началом анимации для свойств при наведении
  }
}

~ Обратите внимание, что это применяется ко всем свойствам перехода (длительность, функция тайминга анимации и т.д.) в классе .base. Это позволяет добиться плавного и контролируемого эффекта при наведении.