<div class="container">
  <div class="box"></div>
</div>

.container {
  margin:30px auto 0;
  width:700px;
  height:400px;
  border:2px dashed #ccc;
  position:relative;
}

@keyframes square {
  
  0% {
    top:0;
    left:0;
    background:blue;
  }
  
  25% {
    top:300px;
    left:0;
    background:red;
  }
  
  50% {
    top:300px;
    left:600px;
    background:green;
  }
  
  75% {
    top:0;
    left:600px;
    background:yellow;
  }
  
}

.box {
  animation:square 10s infinite;
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
  top:0;
  left:0;
}

.box:hover {
  animation-play-state:paused;
}