CSS sliding animation does not flip in the correct area

Question

I am trying to create a CSS animation that has a bird slide to the right, flip and pan back left and flip again. And repeat ... Like a bird running back and forth.

Now he rolls over, sways and does not like how he should. Here is the codepen

Here is my HTML:

<div class="fifth"> <div id="GoRight"> <p>... Loading</p> </div> <div id="TurnGoLeft"></div> 

Here is my CSS:

  .fifth h2 { margin-top: 130px; } .fifth #GoRight{ width: 200px; height: 5px; position: fixed; margin-left: 200px; margin-top: 14px; } .fifth #GoRight p{ font-size: 20px; color: #1886c7; font-family: "Effra Regular", "Droid Sans", Arial, serif; } .fifth #TurnGoLeft { width: 110px; height: 66px; background-image: url("http://goo.gl/BaIPWx"); background-repeat: no-repeat; position: fixed; left: 60px; top: 10px; -webkit-animation: slideflip, flipslide 2s infinite alternate; } @-webkit-keyframes slideflip { 0% { margin-left: 0%; width: 110px; } 100% { margin-left: 20%; width: 110px; } } @-webkit-keyframes flipslide { 50% { margin-left: 0%; width: 110px; } 100% { -webkit-transform: rotateY(180deg); margin-left: 20%; width: 110px; } } 

Any help or understanding will be really helpful! Thanks!

Answer 1

The way you can solve it does not use alternate and instead creates only one animation and takes some steps to execute from left to right and flip :

 @-webkit-keyframes slideflip { 0% { margin-left: 0%; -webkit-transform: rotateY(0); } 25% { margin-left: 20%; -webkit-transform: rotateY(0); } 45% { margin-left: 20%; -webkit-transform: rotateY(180deg); } 80% { margin-left: 0; -webkit-transform: rotateY(180deg); } } 

CodepenDemo

---

_{Codepen and the amount of% changed from the one published in my comment based on the @Ruddy solution, which helps to avoid a coup in the first stage of loading the animation}