Quiero encadenar múltiples transformaciones para lograr un efecto de animación.

Las transformaciones están en 3 partes:

1. El estado inicial es x=0, gira -45 grados
2. x= -2px, rotar 0 grados, duración 300ms, retraso 0
3. x=0, rotar +45 grados, duración 300 ms, retraso 300 ms (para que comience después de 2)

Traté de enumerar las traducciones en orden, pero no funciona:

 const openingAnimation = "rotate-0 translate-x-0.5 delay-300 duration-300 rotate-45 translate-x-0" const initialRotation = "-rotate-45"' <div className={`absolute h-px w-3 bg-white text-white last:ml-2 transform ease-in-out duration-300 ${toggled ? openingAnimation : initialRotation}`} />

¿Tengo que hacerlo con Javascript y una función de tiempo de espera que agregará la tercera animación?