<div style="height: 200px;"></div>
<div id="container">
  <img id="car" width="25" height="25" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFZaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Chle4QcAAAAJcEhZcwAACxMAAAsTAQCanBgAAAL6UExURUdwTLwoJQAEB8w9OuJBPuZWU9BCP7hPTOceHq4tKNktJdpsarwpJeRPSq8ICHEnJrAPC4cxL8lAPdBTULUbG6lCQs1FQbcpJ9hlYsAuK885NsIzMeM3Me07N4NQUr8hHq8yMNFHRMY8Obk4NcI3NMo1MrwpJ7spJrctK7QXEtdjX6MAAMo6OMhCPy4MDrxBP6osK8dAPOlAO9x5d8Q8OaYAALVXVrdLScZqaZBmZpAAAIwzM8xPTKw7Oa80NJ8nJ7wqJ78qKMY2NJcdG95LR0pLUMMrKbkzL8s5N6coJsQ6NkJDQzlMTGQAAOFPTGgAAB9QV510dOdSTjxaYs1YVdJkYv+apddqFdhlY9dhX9pqaBUUFdZjYdNWVNZaV9BEQdRYVdBGQ9VUUdNPS9pvbNx4dhsZGtJRTtxxb9ZfXdloZdI3M89QTcdOTNx0ctZdWjAtLttaWME7ON6AftlnZNpsaiUdHsxAPNlbWM8/PNQ9OgA3Os9KRtdXVNdQTSQkJdVbWCEWFzk5PM06N9NUUdNIRUlbYqBRUbJAPt57eSopK4o/PgAPEsYsKeJwbtA7OLg1M9pXVIosKy5ISwALDQAaHVBPUdJNStpRTshTUaI8Oqg3NrMzMahDQalSUtxfXAMGCHc5OsQzMAAsMNxLR9dEQeN3dbUjIdxjYAAUFk1FRU45OwAeIQEoK9NLR75VVLgtK20yM3ssLJIyMpk2Nd5pZq1CQa4SEJVKSRweH8o0MoI7Ot9lYTYzNa0wLbtDQH1LSqEuLEhNU9FUUURGSok2NQIxM0BAQ1tZXdVoZmdiZUxKSwAlKJI2NmIvLj85OisjJHZCRLMbGbYEAEtmbpkwLrQ7OYxMTZuFhScvMC8xNRxBQ9BfXTQbHCcUFgAWGFEnJ0BQUCoYGUc/QHZVW89NSjBUWAtGSXh7fIdDQl5sb5SYmISIiJdeXw0fIEoiIrxHRRYfIRM7QMdfXSw/QL8pJlFfX5hvb5MqKXh2dmlWVgBAQYFhYaBzc6yuSJ0AAADfdFJOUwD3/hQ5OTgCAQQg+g45Tf5v/vz4Gpos1vv89/ouMf79/fFu2q3s5anDkPsk1cr+YP3ILfu+PP3898yd9PmNdE7Kk8D7hPzukuXH+Pz8a4px/v5B/vn5kv////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////7////////////////////////////////////+//////////////6TEl4rAAAESUlEQVRIx2NgGAWjgHqAgxOHODsuwAmW5AABVA14bGHnQijj5OSEKAVq52AWE2NjY+MN4mVFAF5eXllZLr9+PmYRZh5OmCVQTUrKitOT6+qS0mfOzAWBDx/27+8AgW1z5879YSAlpeqho+Ok4ijApw3SBMT6vZdbk6enz5iRLNcWHPC8evGaHj09JqaeNWurV5/beHTL7KKl2dlVS5csWRLvpeHPCdTDqbxIOLYl6Wn7W7PD6+e1X794ceFGQUF+wbOzOq61B974tcrH2yxLWEiSUVoovXDJX0seBgbTz3kJCQmHNz57dWV9YVxFXFwckBvb0lJXt/Ttm9evpx2Z9nDVyYzSmJlFyy9Jx1vcsGJgEEg1bmkonLv49Im2eStiYmIiI2NAZH5CbM2fF29eHF91etrk9q0nS1Oi7uRu2C4/z1qEwX0Zd0JD4e4zTdOete+JKCmJKIkCgqyIyPxkuVc/T3U1HV/15UBESUREVlTUyZlzLs+xZ1ABaslPODe16/htkBagTEpGRkZKVERk0oFvp06nFRTsvbn6zoqYiAiQrizzbXYMJsu4G/IPv79ftrd6xx6gBFBHXmpqXkZURO2BhycKouvru7rerZ+fCXHw1tB2WwbDPomEipl3e9IurO1eERkJ1JKX2tnZmZeSVfFy8uPo6LS0srKV5vMb8jMzgdpWhOwQZdAFacl91BPdOLV7fmZmDEhLcXFxKlBL9+2CBdFATY092ybGJjQAQUKF8HWQFq1YoJaVaY1TjgLNiswqBdoC1VJdFg0CjQtmzchJB4Na4ZeiQIdpHY7LvXs/rXHB0cKGhnyIy1LzSiMm7l5ctjMNrOXg0vL4xJrpQC02QIeZ9Emk1+Y8WFNWNuVsYWxCXGYEOMhKSyKTFh4rqK/fuTMtrWdfFUjLuunJE2122DKoL+NOjk0/d+bChZVbJh5uiY3LjCkBBmZEZkPywk9Nt2521dd/TJsA1AKyJrlGYa4dg2Yn97rDdbuPFRSs2TIjvaWlJSEfGDLA2E9qvTj5yPGmvbcK1j7Y1V9eGZ+YKLRh+3YFe2CCKY7PmTH39+Pzi2fV5YDA4djYhNjDOU/Ln7RNOwTUdL56UnZzZWX5ouXbL4ETjOl643XJyTUXn0+uvtaa2NqaCALx8fGVldnXr1xpazt0aPJqyeZdizYsv7S8SAqcLDnFvyrW1CSWz+qeHV80++qkTfz8/JMmbdq8Zfa1CbPknpw60eZqsEiSkRGY+OPrsr9bMoOymPzl7P7myqqqyk1r7vdMYQKCe4+mrjmz+Fj16o2bgFlsQ29v767sqqr+RYyevpzgbKkkrirV3N9f1TyhCAgmTJijMGfOvn0HDx68uvns2UnOjG5qauIOGuqa8IwMKgiYuUDFBRsLEjAykpGRkeVy6efjEeHhgZdmkOKCA6oPf6EELM7ghRKIi7vsA6nlwCj68Bew7KOVzCigEAAAop3jpH2nqD8AAAAASUVORK5CYII=">
  <svg width="175" height="1300" preserveAspectRatio="none" viewBox="0 0 175 1300" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="my_path" d="M 28 0 C -72 200 188 300 88 500 C -32 700 88 1100 148 1000 C 208 900 148 600 68 1000 C 28 1200 128 1300 128 1300" stroke-width="4" stroke="#000" />
  </svg>
</div>
<div style="height: 200px;"></div>
#container {
  position: relative;
  timeline-scope: --container;
}

#my_path {
  view-timeline: --container;
}

#car {
  position: absolute;
  inset: 0;

  offset-path: url(#my_path);
  animation: offsetDistance linear forwards;
  animation-timeline: --container;
  animation-range: 
    exit-crossing -5%
    entry-crossing 105%;
}

@keyframes offsetDistance {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.