CSS свойство offset-path

Определение и использование

offset-path Атрибут используется для создания маршрута для анимационных элементов.

Пример

Создайте маршрут для анимации <div>:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Попробуйте сами

Синтаксис CSS

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Значение атрибута

Значение Описание
none По умолчанию. Значение по умолчанию атрибута offset-path элемента.
path() Используйте синтаксис SVG для указания маршрута. См. также:Пути SVG.
ray() Используйте функцию CSS ray() для указания маршрута.
url() Используйте URL SVG файла для указания маршрута.
<basic-shape> Используйте CSS функции (например, inset(), circle(), ellipse() или polygon()) для определения базовой формы и указания маршрута.
<coord-box> Используйте координатный прямоугольник для указания маршрута.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Ингерит этот атрибут от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: none
Ингерит: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS3
Синтаксис JavaScript: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

Связанные страницы

Урок:Пути SVG

Урок:Анимации CSS

См. также:CSS свойство offset

См. также:CSS свойство offset-anchor

См. также:CSS свойство offset-distance

См. также:CSS свойство offset-position

См. также:CSS свойство offset-rotate