CSS Animation for moving/flipping gif

Question

I am trying to build moving animation (CSS) that move horizontally across the screen and then, flip to the other direction and continue infinitely.

@keyframes moving {
  0% {
    left: 0;
  }
  90% {
    left: 1200px;
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

img {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  transform: scaleX(-1);
  animation: walking 6s linear alternate infinite;
  /* animation: fliping 1s linear 6s  infinite; */
}

@keyframes walking {
  0% {
    left: 0;
  }
  100% {
    left: 1100px;
  }
}

@keyframes fliping {
  0% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

moving animation

I have two problems:

Only one animation is running and the other is not
The delay is running only once.

Matredok · Answer

img {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  transform: scaleX(-1);
  animation: walking 12s linear infinite;
}

@keyframes walking {
  0% {
    left: 0;
    transform: scaleX(-1);
  }
  49% {
    transform: scaleX(-1);
  }
  50% {
    left: 1100px;
    transform: scaleX(1);
  }
  99% {
    transform: scaleX(1);
  }
  100% {
    left: 0;
    transform: scaleX(-1);
  }
}

CSS Animation for moving/flipping gif

1 Answers