.test_out{
  animation: animationFrames ease-in-out 6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
}
.test_out2{
  animation: animationFrames ease-in-out 6s;
  animation-delay: 0.25s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
}
.test_out3{
  animation: animationFrames ease-in-out 6s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  ;
  }
  10% {
    transform:  translate(310px,0px)  ;
  }
  16% {
    transform:  translate(290px,0px)  ;
  }
  19% {
    transform:  translate(300px,0px)  ;
  }
  70% {
    transform:  translate(300px,0px)  ;
  }
}