How to loop css animation into a loop ( infinite is not suitable )?

Question

css

Hey!
Can you please tell me how to properly loop css animation in loop?
Three pictures change each other, turning along the Y axis. The problem is that at the end the animation simply starts from the beginning, but you need to make a "loop" so that the 3rd slide is followed by the 1st again without jumping from the end of the animation to the beginning.
For the convenience of the codepen - codepen.io/Andrey-m/pen/bpRwEe
If you look at it, everything will become clear, pay attention to the jerk after the end of the animation of the third slide, there is, as it were, a jerk to the beginning of the first one.
"alternate" is also not quite right, alternate rotates the animation in the reverse order, I would like to just "loop".
Does it make sense to connect a carousel or something like that, three pictures rotate in Y, that's it!
Can this be done in css?

Answer 1

In your case, something like this - codepen.io/anon/pen/BKZpva
Only recalculate the intervals.
PS. Animation doesn't work for me in FF.

Answer 2

.side1{
  -webkit-animation: rotate 10s infinite linear;
  
  @-webkit-keyframes rotate{
    0%   { -webkit-transform: rotateY(90deg); }
    5%   { -webkit-transform: rotateY(0deg); }
    30%  { -webkit-transform: rotateY(0deg); }
    35%  { -webkit-transform: rotateY(90deg); }
    100% { -webkit-transform: rotateY(90deg); }
  }
}

.side2{
  -webkit-animation: rotate2 10s infinite linear;
  
  @-webkit-keyframes rotate2{
    0%   { -webkit-transform: rotateY(90deg); }
    35%  { -webkit-transform: rotateY(90deg); }
    40%  { -webkit-transform: rotateY(0deg); }
    65%  { -webkit-transform: rotateY(0deg); }
    70%  { -webkit-transform: rotateY(90deg); }
    100% { -webkit-transform: rotateY(90deg); }
  }
}

.side3{
  -webkit-animation: rotate3 10s infinite linear;
  
  @-webkit-keyframes rotate3{
    0%   { -webkit-transform: rotateY(90deg); }
    70%  { -webkit-transform: rotateY(90deg); }
    75%  { -webkit-transform: rotateY(0deg); }
    95%  { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(90deg); }
  }
}