CODEWITHSUNDEEP
htmlcssanimationcss-animations
Andrew C
Andrew C

Reputation: 257

Sliding CSS Animation not flipping in correct area

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

Right now it flips, slides and doesn't like like it 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 insight would be really helpful! Thanks!

Upvotes: 6

Views: 176

Answers (1)

DaniP
DaniP

Reputation: 38252

The way you can solve it is not using alternate and instead create just one animation and take some steps to do the left to right and the 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 amount of % changed from the posted one on my commentary, based on the solution of @Ruddy that helps to avoid the flip at the first step of loaded the animation

Upvotes: 2

Related Questions