<div class='parent'>
  <div class='child'></div>
</div>

.parent {
  width: 400px;
  height: 400px;
  background-color: blue;
}
.child {
  width: 50%;
  height: 50%;
  background-color: red;
  animation: left-to-right 1s ease-in forwards infinite alternate;
}
.parent:hover .child {
  /*animation: left-to-right 1s ease-in forwards 3 alternate 3s;*/
  animation-play-state: paused;
}
@keyframes left-to-right {
  0 {
    transform: translateX(0);
    background-color: red;
  }
 33% {
    transform: translateY(100%);
  }
  50% {
     background-color: blue;
  }
  66% {
    transform: translateX(100%) translateY(100%);
  }
  100% {
    transform: translateX(100%);
     background-color: green;
  }
}