CSS Path Function Offset

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

.moving-element {
    width: 40px;
    height: 20px;
    background-color: #007bff;
    border-radius: 10px 40px 40px 10px; /* Shaped like a little rocket/car */
    position: absolute;
    top: 0;
    left: 0;
    
    /* Define the path the element will travel along */
    offset-path: path("M 20 100 C 80 10 120 190 200 100 C 280 10 320 190 380 100");
    
    /* Animate the distance traveled */
    animation: moveAlongPath 4s linear infinite alternate;
  }

@keyframes moveAlongPath {
    0% {
      offset-distance: 0%;
    }
    100% {
      offset-distance: 100%;
    }
  }
  
  /* Optional: Draw the path using an SVG background so we can see the track */
  .track-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><path d="M 20 100 C 80 10 120 190 200 100 C 280 10 320 190 380 100" fill="none" stroke="%23ccc" stroke-width="2" stroke-dasharray="5,5"/></svg>');
    pointer-events: none;
  }
</style>