<div></div>
@keyframes example{
  0%{background:pink;left:0px;top:0px;}  
  25%{background:pink;left:200px;top:0px;}
  50%{background:black;left:200px;top:200px;}
  75%{background:pink;left:0px;top:200px;}
  100%{background:pink;left:0px;top:-2000px;}
}

div{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
  animation-iteration-count: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.