Можно ли смешивать анимации css ключевых кадров?

Question

CodePen: https://codepen.io/matthewharwood/pen/RwWjwdw

Фон:

У меня есть три анимации, которые работают изолированно.

1. Дом
2. Работа
3. Лаборатория

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

1. Void - home
2. Void-работа
3. Void - lab

Я хочу все тезисы :

1. Домашняя работа
2. Домашняя работа лаборатории
3. Работа дома
4. Работа лаборатории
5. Работа лаборатории
6. Lab-home

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

const triggerHome = document.querySelector('.trigger-home');
const triggerWork = document.querySelector('.trigger-work');
const triggerLab = document.querySelector('.trigger-lab');
const animate = document.querySelector('.animate');

triggerHome.addEventListener('click', () => {
  animate.classList.remove('work');
  animate.classList.remove('lab')
  animate.classList.add('homepage');
});

triggerWork.addEventListener('click', () => {
  animate.classList.remove('homepage');
  animate.classList.remove('lab')
  animate.classList.add('work');
});

triggerLab.addEventListener('click', () => {
  animate.classList.remove('homepage')
  animate.classList.remove('work');
  animate.classList.add('lab')
});

.animate {
      background: blue;
      width: 400px;
      transform: translateX(0) scaleX(0) rotateZ(0);
      height: 100px;
      transform-origin: left bottom;
    }
    .animate.homepage {
      animation-name: homepage;
      animation-duration: 3s;
      animation-fill-mode: forwards;
    }
    .animate.work {
      width: calc(100vw - 72px);
      height: calc(100vh - 72px);
      animation-name: work;
      animation-duration: 3s;
      animation-fill-mode: forwards;
    }
    
    .animate.lab {
      width: calc(100vw - 72px);
      height: calc(100vh - 72px);
      animation-name: lab;
      animation-duration: 3s;
      animation-fill-mode: forwards;
    }
    
    @keyframes homepage {
      0%   { transform: translateX(0) scaleX(0) rotateZ(0)}
      66%  {transform: translateX(0) scaleX(1) rotateZ(0)}
      100% {transform: translateX(0) scaleX(1) rotateZ(-30deg)}
    }
    
    @keyframes work {
      0%   { transform: translateX(0) scaleX(0) rotateZ(0)}
      66%  {transform: translateX(0) scaleX(1) rotateZ(0)}
      100% {transform: translateX(0) scaleX(1) rotateZ(0)}
    }
    
    @keyframes lab {
      0%   { transform: translateX(0) scaleX(0) rotateZ(0); transform-origin: left}
      66%  {transform: translateX(0) scaleX(1) rotateZ(0); transform-origin: left}
      90% {transform: translateX(0) scaleX(1) rotateZ(0);transform-origin: right}
      100% {transform: translateX(0) scaleX(0) rotateZ(0);transform-origin: right}
    }

<button class="trigger-home z-10 left-0 top-0 bg-indigo-900 text-white p-4">
      homepage
    </button>
    
    <button class="trigger-work z-10 left-0 top-0 bg-indigo-900 text-white p-4">
      work
    </button>
    <button class="trigger-lab z-10 left-0 top-0 bg-indigo-900 text-white p-4">
      lab
    </button>
    <div class="flex h-screen w-screen justify-center items-center">
      <div class="animate">
        <h1 class="left"></h1>
      </div>
    </div>

note: Также обратите внимание, что сейчас я делаю classList.add / remove для триггеров ... для этого потребуется лучший механизм тоже.