CSS @keyframes

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

  #div {  border:50px solid red;display:inline-block;
          animation:anime 7s linear infinite 1s;  }

  @keyframes anime {
         10%{transform:translate(0)rotate(0);}
         40%{transform:translate(1250px,500px)rotate(360deg);}
         60%{transform:translate(1250px,500px)rotate(360deg);}
         90%{transform:translate(0)rotate(0);}
       }

</style>
</head>
<body>

<div id='div'></div>

</body>
</html>