I want to chain multiple transforms to achieve an animation effect.

The transforms are in 3 parts:

1. Initial state is x=0, rotate -45deg
2. x= -2px, rotate 0deg, duration 300ms, delay 0
3. x=0, rotate +45deg, duration 300ms, delay 300ms (so that it starts after 2)

I tried to just list the translations in order, but it is not working:

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}`}
/>

Do I have to do it with Javascript and a timeout function that will add the third animation?