W3docs
ru
Войти

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

Используйте CSS-свойство offset-path для задания пути движения элемента. Описание значений и примеры.

CSS-свойство offset-path задаёт геометрический путь, вдоль которого элемент может быть расположен и перемещён. Оно является частью Motion Path Module — набора CSS-свойств, позволяющих анимировать элемент вдоль произвольного пути: кривой, прямой или контура SVG-фигуры — вместо ограничения прямолинейными переходами top/left.

Само по себе offset-path описывает лишь трассу. Фактическое положение элемента на этой трассе задаётся свойством offset-distance (0% = начало пути, 100% = конец). Именно анимация offset-distance от 0% до 100% заставляет элемент двигаться по пути.

Когда это использовать?

Используйте offset-path, когда вам нужно движение вдоль реальной кривой, которое сложно выразить через шаговые transform: translate() в ключевых кадрах, — например, планета на эллиптической орбите, маркер, скользящий по извилистой дороге, или иконка, двигающаяся по контуру SVG-логотипа. Поскольку браузер интерполирует положение вдоль пути, движение остаётся плавным независимо от сложности кривой.

В ранних версиях спецификации это свойство называлось motion-path. Оно было переименовано в offset-path, поскольку свойство задаёт статические позиции на пути (анимацию обеспечивает offset-distance), а старые имена motion-* теперь устарели.

Информация

Само свойство offset-path не анимируется — оно лишь задаёт путь. Движение создаётся анимацией offset-distance (обычно с помощью правила @keyframes), а offset-rotate управляет поворотом элемента в направлении движения.

Если вы задали offset-path в CSS, движением также можно управлять из JavaScript, обновляя offset-distance со временем.

Связанные свойства offset

Модуль Motion Path работает как небольшое семейство свойств — offset-path является его центральным элементом:

  • offset-distance — насколько далеко вдоль пути находится элемент.
  • offset-rotate — поворачивается ли элемент в направлении пути.
  • offset-position — начальная точка, используемая, когда путь задаётся относительно.
  • offset-anchor — какая точка элемента «прикреплена» к пути.
  • offset — сокращённое свойство, устанавливающее все перечисленные выше свойства сразу.
Начальное значениеnone
Применяется кТрансформируемым элементам.
НаследуетсяНет.
АнимируетсяНет.
ВерсияMotion Path Module Level 1
DOM-синтаксисobject.style.offsetPath = "ray()";

Синтаксис

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

Несколько замечаний по функциям пути:

  • path("...") принимает строку SVG-пути (тот же синтаксис атрибута d, что используется в <path>). Это наиболее гибкий вариант с наилучшей поддержкой.
  • ray(45deg) проводит прямую линию от начальной позиции элемента под заданным углом.
  • url(#myPath) повторно использует геометрию SVG-фигуры, уже присутствующей в документе, ссылаясь на неё по id.
  • <basic-shape>, например circle(), ellipse(), inset() или polygon(), позволяет строить распространённые пути без написания SVG вручную.

Пример: анимация вдоль SVG-пути

Здесь сине-зелёный квадрат движется вдоль изогнутого SVG-пути. Правило @keyframes анимирует offset-distance от начального значения 0% до 100%, а offset-rotate: reverse разворачивает квадрат вдоль кривой при движении.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 30%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 3s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-path property example</h2>
      <div class="mover"></div>
    </body>
</html>
Попробуйте сами »

Пример: размещение элементов в фиксированных точках на пути

Анимировать путь совсем не обязательно. Задав фиксированное значение offset-distance, можно просто установить элемент в нужной точке трассы — это удобно для расположения блоков вдоль общей кривой.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #666;
      }
      .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
        background-color: #8ebf42;
        offset-distance: -280%;
      }
      #box2 {
        background-color: #1c87c9;
        offset-distance: 190%;
      }
    </style>
    <body>
      <div class="item" id="box1"></div>
      <div class="item" id="box2"></div>
    </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
noneПуть движения не задан. Это значение по умолчанию.
ray()Отрезок, начинающийся от позиции блока и направленный под заданным углом, например ray(45deg).
path()Строка SVG-пути, например path("M 0 0 L 100 100"), используемая непосредственно как путь.
url()Ссылается на id SVG-фигуры, используемой в качестве пути движения, например url(#myPath).
<basic-shape>Функция формы: circle(), ellipse(), inset() или polygon().

Поддержка браузерами

offset-path поддерживается во всех актуальных версиях Chrome, Edge, Firefox, Safari и Opera. Значение path() имеет наиболее широкую поддержку; поддержка ray() и значений <basic-shape> появилась позже, поэтому их следует проверять при ориентации на старые браузеры. Устаревшее имя motion-path не рекомендуется к использованию.

Практика

Практика
Что делает CSS-свойство offset-path?
Что делает CSS-свойство offset-path?
Was this page helpful?