W3docs
ru
Войти

Свойство CSS offset-distance

Свойство CSS offset-distance задаёт положение элемента вдоль траектории offset-path. Значения и примеры использования.

CSS-свойство offset-distance задаёт, насколько далеко элемент перемещается вдоль своей траектории движения — пути, определённого свойством offset-path. Представьте offset-path как рельсы, а offset-distance — как положение элемента на этих рельсах: значение 0 помещает элемент в начало, 100% — в конец.

Это один из ключевых элементов CSS Motion Path, который позволяет элементу двигаться по произвольной форме (прямой, кривой, SVG-пути) вместо ограниченных переходов через top/left. Само по себе свойство offset-distance является статичным, но анимация от 0 до 100% заставляет элемент скользить вдоль пути.

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

  • Анимация элемента по кривой или произвольной траектории — самолёт, следующий по маршруту, бусина на нитке, иконка, описывающая круг. Обычные CSS-переходы с этим не справятся, а траектория движения — справится.
  • Фиксация элемента в определённой точке пути — задайте фиксированное значение, например offset-distance: 50%, чтобы разместить элемент посередине своего offset-path.
  • Движение при прокрутке или взаимодействии — обновляйте offset-distance через JavaScript (или с помощью анимации прокрутки), чтобы перемещать элемент по пути в ответ на действия пользователя.

offset-distance не имеет эффекта, если у элемента не задан offset-path. Без пути нет расстояния, которое можно было бы отмерять.

Значения

Принимает одно значение <length-percentage>:

  • <length> — абсолютное расстояние от начала пути, например 40px.
  • <percentage> — расстояние относительно полной длины пути. 0% — начало, 100% — конец.

Начальное значение — 0.

Информация

Отрицательные значения и значения свыше 100% допустимы. Значение вроде -20% или 120% выводит элемент за пределы пути; для замкнутого пути элемент перемещается по кругу. Это удобно, когда нужно, чтобы элемент начинал вне пути и появлялся на нём в процессе анимации.

Внимание

offset-distance является частью экспериментального модуля CSS Motion Path. В ранних черновиках спецификации это свойство называлось motion-offset. Перед использованием в продакшне проверьте актуальную поддержку браузерами.

СвойствоЗначение
Начальное значение0
Применяется кТрансформируемым элементам
НаследуетсяНет
АнимируетсяДа
ВерсияMotion Path Module Level 1
DOM Syntaxobject.style.offsetDistance = "100%";

Синтаксис

offset-distance: <length-percentage>;

Например:

/* A fixed point partway along the path */
offset-distance: 70%;

/* Absolute distance from the start */
offset-distance: 50px;

/* Animate from start to end of the path */
@keyframes move {
  to {
    offset-distance: 100%;
  }
}

Примеры

Анимация элемента по произвольной траектории

У элемента ниже задан offset-path в форме кривой. Анимация offset-distance от начального значения 0 до 100% плавно перемещает блок вдоль этой траектории. Обратите внимание: offset-rotate: reverse заставляет блок поворачиваться в направлении движения.

Пример с домом и ножницами

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        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 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>
Попробуйте сами »

Указание расстояния в процентах

Здесь значение анимируется как процент от полной длины пути, поэтому элемент совершает ровно один полный проход независимо от длины пути. Использование 100% вместо абсолютной длины — наиболее универсальный способ анимации вдоль пути.

Пример свойства CSS offset-distance

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>
Попробуйте сами »

Допустимые значения

ЗначениеОписание
<length-percentage>Длина или процент, задающие положение вдоль траектории, отсчитываемое от её начала.
initialУстанавливает свойство в значение по умолчанию (0).
inheritНаследует значение от родительского элемента.

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

offset-distance редко используется самостоятельно — оно работает совместно с другими свойствами CSS Motion Path:

  • offset-path — определяет траекторию, по которой движется элемент.
  • offset-rotate — управляет поворотом элемента при движении по пути.
  • offset-anchor — указывает, какая точка элемента помещается на путь.
  • offset — сокращённое свойство, задающее все свойства траектории движения сразу.
  • animation — управляет ключевыми кадрами offset-distance, создающими движение.

Практика

Практика
Что позволяет делать свойство CSS 'offset-distance'?
Что позволяет делать свойство CSS 'offset-distance'?
Was this page helpful?