CSS offset-path — рух елемента вздовж заданого шляху

CSS властивість offset-path задає траєкторію, уздовж якої рухається елемент: коло, лінію чи довільний SVG-шлях.

правити

Загальний опис

Звичайні перетворення рухають елемент по прямій між двома точками. Щоб пустити його по дузі чи по хвилі, раніше довелось би рахувати координати покадрово в JavaScript.

offset-path задає саму криву, а offset-distance — позицію на ній: від 0% (початок шляху) до 100% (кінець). Анімувати треба лише другу — і елемент поїде по кривій.

Ще є offset-rotate: за замовчуванням елемент повертається за напрямком руху, як машинка на трасі.

правити

Порада

Шлях зручно намалювати в SVG-редакторі, а потім скопіювати атрибут d просто в path() — координати тут ті самі.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

offset-path: none | <basic-shape> | path(<string>) | <url>;

Властивість offset-path може отримувати 4 значень:

none

Без траєкторії.

автор: NagarD

правити

path()

SVG-шлях: path("M 0 0 L 100 100").

автор: NagarD

правити

basic-shape

Фігура: circle(), inset(), polygon()…

автор: NagarD

правити

url

Посилання на SVG-елемент.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
offset-path	55+	72+	15.4+	42+	79+	-

Підтримка: мобільні переглядачі

Переглядач
offset-path	55+	yes	yes	15.4+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="rocket">🚀</div>

.rocket {
    /* траєкторія — хвиля */
    offset-path: path('M 0 100 Q 100 0 200 100 T 400 100');
    offset-distance: 0%;
    animation: fly 4s linear infinite;
}

@keyframes fly {
    to { offset-distance: 100%; }
}