<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: relative;
      animation: move 2s infinite;
    }
    
    @keyframes move {
      0% { top: 0; left: 0; }
      50% { top: 200px; left: 200px; }
      100% { top: 0; left: 0; }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

<!DOCTYPE html> <html> <head> <style> .box { width: 50px; height: 50px; background-color: red; position: relative; animation: move 2s infinite; } @keyframes move { 0% { top: 0; left: 0; } 50% { top: 200px; left: 200px; } 100% { top: 0; left: 0; } } </style> </head> <body> <div class="box"></div> </body> </html>