JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div"> asdfadfs </div>
<div id="div2"> asdfadfs </div>

CSS

#div {
position: absolute; top: 50px;
width: 100px; height: 100px; background: blue;
    -webkit-animation-name: shift;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: reverse;
  }
 @-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    20% {
        top: 150px;
        left: 100px;
    }
    to {
        top: 400px;
        left: 300px;
    }   
 }
 #div2 {
color: red; position: absolute; left: 200px;  top: 50px;
width: 100px; height: 100px; background: blue;
    -webkit-animation-name: shift2;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: normal;
  }
 @-webkit-keyframes shift2{
    from{
        top: 50px;
        left: 200px;    
    }
    20% {
        top: 150px;
        left: 300px;
    }
    to {
        top: 400px;
        left: 500px;
    }   
 }