ExampleEdit

Css motion path

by schrodingers

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mpath -->

<svg width="100%" height="100%" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <!-- <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="lightblue" stroke-width="4"  /> -->
  <circle cx="100" cy="250" r="7" fill="lightblue" />
  <circle cx="400" cy="250" r="7" fill="lightblue" />

  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <polygon class="triangle" points="-15,-12, 15,-12, 0,-50" fill="lightgreen" stroke="cyan" stroke-width="2" />
</svg>

CSS

.triangle {
  offset-path: path("M100,250 C 100,50 400,50 400,250");
  animation: on-path 5s infinite;
}


/* Define the motion path animation */

@keyframes on-path {
  0% {
    offset-distance: 0;
  }
  50% {
    offset-distance: 100%;
  }
  100% {
    offset-distance: 0;
  }
}