CSS rotate creates shake of arrow

Question

I am animating an arrow moving from left to right then turn 180deg and move from right to left. For some reasons, when turning arrow with CSS rotate, arrow's position gets moved a bit upwards. How can I keep it position the same when moving arrow? The arrow is a image element.

And also how can I get smooth rotate of arrow with CSS3 keyframes?

.bg {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: blue;
}

.arrow {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-name: moveRightToLeft;
  animation-name: moveRightToLeft;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.arrow img {
  max-width: 100%;
}

@keyframes moveRightToLeft {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
    -ms-transform: rotateZ(0deg) translate3d(0, 0, 0);
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: rotateZ(0deg) translate3d(70px, 0, 0);
    -ms-transform: rotateZ(0deg) translate3d(70px, 0, 0);
    transform: rotateZ(0deg) translate3d(70px, 0, 0);
    opacity: 1;
  }
  51% {
    -webkit-transform: rotateZ(0deg) translate3d(70px, 10px, 0);
    -ms-transform: rotateZ(0deg) translate3d(70px, 10px, 0);
    transform: rotateZ(0deg) translate3d(70px, 10px, 0);
  }
  53% {
    -webkit-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    -ms-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
  }
  54% {
    -webkit-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    -ms-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateZ(-180deg) translate3d(0, 10px, 0);
    -ms-transform: rotateZ(-180deg) translate3d(0, 10px, 0);
    transform: rotateZ(-180deg) translate3d(0, 0, 10px);
  }
}

<div class="bg"></div>
<div class="arrow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/2000px-Arrow_right.svg.png">
</div>

Answer 1

You can try something like this:

.bg {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: blue;
}

.arrow {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  animation:moveRightToLeft 2s 3s infinite linear;
}

.arrow img {
  max-width: 100%;
}

@keyframes moveRightToLeft {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(0deg) translate(70px, 0);
  }
  50.1% {
    transform: rotate(-180deg) translate(-70px, -100%);
  }
  100% {
    transform: rotate(-180deg) translate(0, -100%);
  }
}

<div class="bg"></div>
<div class="arrow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/2000px-Arrow_right.svg.png">
</div>

Answer 2

Try adding the animation to the image inside the arrow.The width and the height of the div creates the problem.Also change transform: rotateZ(-180deg) translate3d(-70px, 10px, 0); to transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);

.bg{
width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: blue;
}
.arrow img{
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  
  -webkit-animation-delay: 2s;
                        animation-delay: 2s;
                        -webkit-animation-name: moveRightToLeft;
                        animation-name: moveRightToLeft;
                        -webkit-animation-duration: 3s;
                        animation-duration: 3s;
                        -webkit-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                        -webkit-animation-timing-function: linear;
                        animation-timing-function: linear;
}

.arrow img{
max-width: 100%;
}

@keyframes moveRightToLeft {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
        -ms-transform: rotateZ(0deg) translate3d(0, 0, 0);
        transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: rotateZ(0deg) translate3d(70px, 0, 0);
        -ms-transform: rotateZ(0deg) translate3d(70px, 0, 0);
        transform: rotateZ(0deg) translate3d(70px, 0, 0);
        opacity: 1;
    }
    51% {
        opacity: 0;
         -webkit-transform: rotateZ(0deg) translate3d(70px, 0px, 0);
        -ms-transform: rotateZ(0deg) translate3d(70px, 0px, 0);
        transform: rotateZ(0deg) translate3d(70px, 0px, 0);
    }
    53% {
        opacity: 0;
      -webkit-transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);
        -ms-transform: rotateZ(-180deg) translate3d(-70px,0px, 0);
        transform: rotateZ(-180deg) translate3d(-70px,0px, 0);

    }
    54% {
        -webkit-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
        -ms-transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);
        transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);
        opacity: 1;
    }
    100%{
     -webkit-transform: rotateZ(-180deg) translate3d(0, 0px, 0);
        -ms-transform: rotateZ(-180deg) translate3d(0,0px, 0);
        transform: rotateZ(-180deg) translate3d(0, 0,0px);
    }
    
}

<div class="bg"></div>
<div class="arrow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/2000px-Arrow_right.svg.png">
</div>