CSS Linear Function Compare

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

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

/* Standard ease-in-out */
  .standard-ease {
    background-color: #dc3545;
    animation-timing-function: ease-in-out;
  }

/* Custom linear() bounce */
  .custom-linear {
    background-color: #28a745;
    animation-timing-function: linear(
      0, 0.01, 0.04 8%, 0.16 17%, 0.46 29%, 0.74 39%, 0.9 46%, 
      0.98 53%, 1.01 58%, 1.01 62%, 0.99 68%, 0.98 73%, 1 83%, 1
    );
  }

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