CSS Steps Function Basic

<!DOCTYPE html>
<title>My Example</title>

.runner {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: #007bff;
    
    /* Both animations take exactly 3 seconds */
    animation: runAcross 3s infinite;
  }

/* Smooth linear movement */
  .smooth-linear {
    background-color: #dc3545;
    animation-timing-function: linear;
  }

/* Stepped movement (5 distinct jumps) */
  .stepped {
    background-color: #28a745;
    animation-timing-function: steps(5);
  }

@keyframes runAcross {
    0% {
      transform: translateX(0);
    }
    100% {
      /* Move 300px to the right */
      transform: translateX(300px);
    }
  }
</style>