.step {
  height: 128px;
  width: 128px;
  animation: move 2.5s infinite;
  left: 90%;
  transform: translate(-50%, -50%);
  position: relative;
  top: -256px;
}

.step .stepbox {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  transform:translateZ(0);
  backface-visibility:hidden;
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 0;
  position: absolute;
  left: 90%; top: 50%;
  transform: translate(-50%, -50%);
  animation: moving_ani 0.5s steps(3) infinite;
  scale: 400%
}

@keyframes moving_ani {
  0% {object-position: 0 0;}
  100% {object-position: -96px 0;}
}
@keyframes move {
  0% {top: -256px;}
  25% {top: -128px;}
  50% {top: 0px;}
  75% {top: 128px;}
  100% {top: 256px;}
}

.turnchararea {
  max-width: 930px;
  margin: auto;
  position: relative;
}

.turn {
  height: 128px;
  width: 128px;
  transform: translate(-50%, -50%);
  display: inline-block;
  position: relative;
  left: 20px;
  top: 256px;
}

.turn .char {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  transform:translateZ(0);
  backface-visibility:hidden;
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 0;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  animation: turning_ani 2s steps(12) infinite;
  scale: 400%
}

@keyframes turning_ani {
  0% {object-position: 0 0;}
  100% {object-position: -384px 0;}
}

@media(max-width: 790px){
  .turn {
    left: 0px;
    position:absolute;
  }
}