html,
body {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}
.frame {
  position: relative;
  width: 70vw;
  height: 12vw;
  overflow: hidden;
  background: transparent;
}

#snail {
  position: absolute;
  left: 0;
  animation-name: walksnail;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#snail img {
  width: 5vw;
  animation-name: flipsnail;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

@keyframes walksnail {
  from {
    left: 0;
  }

  to {
    left: calc(70vw - 5vw);
  }
}

@keyframes flipsnail {
  0%,
  49.999% {
    transform: scaleX(1);
  }

  50%,
  100% {
    transform: scaleX(-1);
  }
}