Итак, в CSS появился новый модуль Motion Path, позволяющий перемещать любые объекты по заданной траектории.

Ранее можно было анимировать только простые движения, указывая положение элемента и используя CSS-функции (например, translate).

Теперь свойство offset-path позволяет указать конкретный путь, различной сложности, а затем переместить объект вдоль указанного пути с помощью offset-distance, заставив его при необходимости вращаться, благодаря offset-rotate.

Рассмотрим небольшой пример.

HTML:

<div id="motion-element"></div>

CSS:

#motion-element {
  offset-path: path('M20,20 C20,100 200,0 200,100');
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 100%;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

А вот результат на codepen:

Следует помнить, что в настоящее время технология является экспериментальной, поэтому не забывайте проверять воможность ее использования в различных браузерах.

Спасибо за внимание.