CSS Rotation animation weaving not working properly - css

Question

I am trying to achieve a simple animation with css.
My markup has the following structure:
<main>
<left />
<middle />
<right />
</main>
I want my animation to do the following sequence:
// second 0 - 2: Do nothing
// second 2 - 3: hide the middle element, move the left element to the right, and the right element to the left.
// second 3 - 4: Rotate the main element 360 degrees
// second 4 - 6: Do nothing
// second 6 - 7: show the middle element, move the left element to the left, and the right element to the right.
// Repeat
Here is my css code:
#keyframes hideMiddle {
28.57%, 42.85% {opacity: 0;}
85.71%, 100% {opacity: 1;}
}
#keyframes moveRight {
28.57%, 42.85% { transform: translateX(15%);}
85.71%, 100% {transform: translateX(0%);}
}
#keyframes moveLeft {
28.57%, 42.85% {transform: translateX(-22%);}
85.71%, 100% {transform: translateX(0%);}
}
#keyframes rotateMain {
42.85%, 57.14% {transform: rotate(360deg);}
}
Everything works until I add the rotateMain animation at which point it seems to run from the start of the animation rather than where its set to start as well as it seems to do an extra rotation. Any help is appreciated, thanks a lot.

Answer 1

So after playing around a bit I figured it out, I'm leaving an answer to the question in case anyone finds some use in this although its not the best formulated question:
So the problem was in the rotate keyframes, I used this:
#keyframes rotateMain {
42.85%, 57.14% {transform: rotate(360deg);}
}
Thinking it would rotate the figure 360 degrees from 42.85% to 57.14%.
The following code actually achieves what I wanted:
#keyframes rotateMain {
42.85% {transform: rotate(0deg);}
57.14% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}