CSS offset-distance — позиція елемента на траєкторії

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

правити

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

Сама по собі властивість нічого не рухає — вона лише каже, де на кривій стоїть елемент. Криву задає offset-path, а offset-distance — точку на ній: у відсотках довжини шляху чи в одиницях довжини.

Рух з'являється, коли значення анімувати: два ключові кадри — від 0% до 100% — і елемент їде по дузі, колу чи хвилі без жодного JavaScript.

За замовчуванням елемент ще й повертається за напрямком руху — цим керує offset-rotate.

правити

Нотатка

Анімувати варто саме offset-distance: траєкторія один раз задана в offset-path, а рух — це два ключові кадри й жодного JavaScript.

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

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

Синтаксис

offset-distance: <length> | <percentage>;

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

length

Відстань від початку шляху в одиницях довжини: 100px, 5em.

автор: NagarD

правити

%

Частка довжини шляху: 0% — початок, 100% — кінець.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
	55	72	16	42	79	—

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

Переглядач
	55	55	79	16

Приклади

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

<div class="car">🚗</div>

.car {
    offset-path: path('M 0 80 Q 200 -40 400 80');
    offset-distance: 0%;
    width: max-content;
    animation: ride 3s ease-in-out infinite alternate;
}

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