Новый модуль Motion Path в 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%;
}
}

Объяснение примера

1. offset-path: Свойство offset-path задает путь, по которому будет перемещаться элемент. В данном примере используется path('M20,20 C20,100 200,0 200,100'), что определяет кривую Безье.
2. animation: Свойство animation определяет анимацию с именем move, длительностью 3000 миллисекунд, которая будет повторяться бесконечно и изменять направление на каждом повторении (с помощью alternate).
3. offset-distance: Внутри ключевых кадров (@keyframes move) свойство offset-distance указывает процент пути, который элемент проходит на каждом этапе анимации.

Пример на CodePen

Вы можете увидеть этот пример в действии на CodePen.

Важные замечания

На данный момент технология Motion Path является экспериментальной, и поддержка может варьироваться в разных браузерах. Поэтому всегда проверяйте совместимость перед использованием в продакшн-проектах.

Дополнительные возможности

1. offset-rotate: Позволяет элементу вращаться вдоль пути. Например, offset-rotate: auto; заставит элемент поворачиваться в зависимости от кривизны пути.
2. offset-anchor: Позволяет

Пример использования offset-rotate:

#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%;
offset-rotate: auto;
}

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