Hey.

Can you please tell me how to loop the css animation?

Three pictures change each other, turning on Y. The problem is that at the end there is a sharp return to the beginning of the cycle, i.e. the animation just starts from the beginning, but you need to make a "loop".

For convenience, codepen - http://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 a kind of a jerk to the beginning to the first.

.banner { width: 300px; height: 143px; border: 1px solid red; margin: 30px auto; position: relative; } .position { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; text-align: center; padding: 35px 15px; } h2 { font-size: 26px; background-color: pink; } .side1 { animation: rotate 5s infinite linear; -webkit-animation: rotate 5s infinite linear; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(0deg); } 30% { -webkit-transform: rotateY(90deg); } 40% { -webkit-transform: rotateY(90deg); } 60% { -webkit-transform: rotateY(90deg); } 80% { -webkit-transform: rotateY(90deg); } 100% { -webkit-transform: rotateY(90deg); } } @keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(0deg); } 30% { -webkit-transform: rotateY(90deg); } 40% { -webkit-transform: rotateY(90deg); } 60% { -webkit-transform: rotateY(90deg); } 80% { -webkit-transform: rotateY(90deg); } 100% { -webkit-transform: rotateY(90deg); } } .side2 { animation: rotate2 5s infinite linear; -webkit-animation: rotate2 5s infinite linear; } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotateY(90deg); } 20% { -webkit-transform: rotateY(90deg); } 30% { -webkit-transform: rotateY(90deg); } 40% { -webkit-transform: rotateY(0deg); } 60% { -webkit-transform: rotateY(0deg); } 70% { -webkit-transform: rotateY(90deg); } 80% { -webkit-transform: rotateY(90deg); } 100% { -webkit-transform: rotateY(90deg); } } @keyframes rotate2 { 0% { -webkit-transform: rotateY(90deg); } 20% { -webkit-transform: rotateY(90deg); } 30% { -webkit-transform: rotateY(90deg); } 40% { -webkit-transform: rotateY(0deg); } 60% { -webkit-transform: rotateY(0deg); } 70% { -webkit-transform: rotateY(90deg); } 80% { -webkit-transform: rotateY(90deg); } 100% { -webkit-transform: rotateY(90deg); } } .side3 { animation: rotate3 5s infinite linear; -webkit-animation: rotate3 5s infinite linear; } @keyframes rotate3 { 0% { -webkit-transform: rotateY(90deg); } 0% { -webkit-transform: rotateY(90deg); } 20% { -webkit-transform: rotateY(90deg); } 40% { -webkit-transform: rotateY(90deg); } 60% { -webkit-transform: rotateY(90deg); } 70% { -webkit-transform: rotateY(90deg); } 80% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(0deg); } } @-webkit-keyframes rotate3 { 0% { -webkit-transform: rotateY(90deg); } 0% { -webkit-transform: rotateY(90deg); } 20% { -webkit-transform: rotateY(90deg); } 40% { -webkit-transform: rotateY(90deg); } 60% { -webkit-transform: rotateY(90deg); } 70% { -webkit-transform: rotateY(90deg); } 80% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(0deg); } } 
 <div class="banner"> <div class="side1 position"> <h2>1111111111111111</h2> </div> <div class="side2 position"> <h2>2222222222222222</h2> </div> <div class="side3 position"> <h2>3333333333333333</h2> </div> </div>

Thank!

    1 answer 1

    The problem was that you had the wrong animation logic. The final position during the animation and the initial must match, which you have not thought out. In the example below, he showed an approximate calculation logic for such animations. Next on your own ...

     .banner { width: 300px; height: 143px; border: 1px solid red; margin: 30px auto; position: relative; } .position { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; text-align: center; padding: 35px 15px; } h2 { font-size: 26px; background-color: pink; } .side1 { animation: rotate 5s infinite linear; -webkit-animation: rotate 5s infinite linear; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 16.6% { -webkit-transform: rotateY(90deg); } 33.2% { -webkit-transform: rotateY(90deg); } 49.8% { -webkit-transform: rotateY(90deg); } 66.4% { -webkit-transform: rotateY(90deg); } 83.0% { -webkit-transform: rotateY(90deg); } 99.6% { -webkit-transform: rotateY(0deg); } } @keyframes rotate { 0% { -webkit-transform: rotateY(0deg); } 16.6% { -webkit-transform: rotateY(90deg); } 33.2% { -webkit-transform: rotateY(90deg); } 49.8% { -webkit-transform: rotateY(90deg); } 66.4% { -webkit-transform: rotateY(90deg); } 83.0% { -webkit-transform: rotateY(90deg); } 99.6% { -webkit-transform: rotateY(0deg); } } .side2 { animation: rotate2 5s infinite linear; -webkit-animation: rotate2 5s infinite linear; } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotateY(90deg); } 16.6% { -webkit-transform: rotateY(90deg); } 33.2% { -webkit-transform: rotateY(0deg); } 49.8% { -webkit-transform: rotateY(90deg); } 66.4% { -webkit-transform: rotateY(90deg); } 83.0% { -webkit-transform: rotateY(90deg); } 99.6% { -webkit-transform: rotateY(90deg); } } @keyframes rotate2 { 0% { -webkit-transform: rotateY(90deg); } 16.6% { -webkit-transform: rotateY(90deg); } 33.2% { -webkit-transform: rotateY(0deg); } 49.8% { -webkit-transform: rotateY(90deg); } 66.4% { -webkit-transform: rotateY(90deg); } 83.0% { -webkit-transform: rotateY(90deg); } 99.6% { -webkit-transform: rotateY(90deg); } } .side3 { animation: rotate3 5s infinite linear; -webkit-animation: rotate3 5s infinite linear; } @keyframes rotate3 { 0% { -webkit-transform: rotateY(90deg); } 16.6% { -webkit-transform: rotateY(90deg); } 33.2% { -webkit-transform: rotateY(90deg); } 49.8% { -webkit-transform: rotateY(90deg); } 66.4% { -webkit-transform: rotateY(0deg); } 83.0% { -webkit-transform: rotateY(90deg); } 99.6% { -webkit-transform: rotateY(90deg); } } @-webkit-keyframes rotate3 { 0% { -webkit-transform: rotateY(90deg); } 16.6% { -webkit-transform: rotateY(90deg); } 33.2% { -webkit-transform: rotateY(90deg); } 49.8% { -webkit-transform: rotateY(90deg); } 66.4% { -webkit-transform: rotateY(0deg); } 83.0% { -webkit-transform: rotateY(90deg); } 99.6% { -webkit-transform: rotateY(90deg); } } 
      <div class="banner"> <div class="side1 position"> <h2>1111111111111111</h2> </div> <div class="side2 position"> <h2>2222222222222222</h2> </div> <div class="side3 position"> <h2>3333333333333333</h2> </div> </div>