W3docs
ru
Войти

CSS свойство offset

Используйте сокращённое CSS свойство offset для анимации элемента вдоль заданного пути. Значения свойства и практические примеры.

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

На этой странице рассматривается, что такое offset, пять длинных свойств, которые оно объединяет, его синтаксис и запускаемые примеры. Используйте его, когда хотите, чтобы элемент следовал по кривой или произвольному контуру — например, маркер, прослеживающий маршрут на карте, значок, вращающийся вокруг логотипа, или текст, скользящий по волне.

Для каких свойств offset является сокращением

offset задаёт пять длинных свойств в одном объявлении. Каждое управляет отдельной частью движения:

  • offset-path — форма, которой следует элемент (SVG path(), circle(), ray() или контур контейнера).
  • offset-distance — насколько далеко вдоль пути элемент находится в данный момент (0% — начало, 100% — конец). Именно это значение обычно анимируют.
  • offset-position — начальная точка, используемая, когда offset-path является формой без собственного начала координат.
  • offset-anchor — какая точка элемента прикреплена к пути (его центр, угол и т. д.).
  • offset-rotate — поворачивается ли элемент в направлении движения.

Поскольку offset является сокращением, любое длинное свойство, которое вы не указываете, сбрасывается до начального значения. Поэтому в большинстве реальных анимаций анимируют непосредственно offset-distance (чтобы путь и якорь оставались на месте, а менялась только позиция).

Информация

Свойство offset называлось motion в более ранней версии спецификации. В старых статьях вы можете встретить motion-path и motion-offset — это устаревшие названия для offset-path и offset-distance.

Внимание

Это экспериментальная технология. Перед использованием в production проверьте текущую поддержку браузерами и предусмотрите разумный запасной вариант (например, простую анимацию transform) для браузеров, не поддерживающих пути движения.

Начальное значениеauto none 0 auto auto
Применяется кТрансформируемым элементам.
НаследуетсяНет.
АнимируетсяДа.
ВерсияMotion Path Module Level 1
DOM СинтаксисObject.style.offset = "auto";

Синтаксис

offset: offset-position offset-path offset-distance offset-anchor / offset-rotate;

Символ / отделяет значения, связанные с позицией, от offset-rotate. На практике все пять параметров редко указываются одновременно. Распространённые формы:

/* Follow an SVG path, facing the direction of travel */
offset: path("M 100 100 L 300 100 L 200 300 z") auto;

/* Just the path; control distance with a separate animation */
offset-path: path("M 0 0 H 300");

/* Reset everything to defaults */
offset: initial;

auto после пути — это offset-rotate: auto, который сохраняет направление элемента вдоль пути по мере его движения — удобно для стрелок или транспортных средств.

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

Элемент ниже следует по треугольнику. Правило @keyframes анимирует offset-distance от 0% до 100%, поэтому блок бесконечно движется по пути.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes move {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      div {
        width: 60px;
        height: 60px;
        background-color: #8ebf42;
        offset: path("M 100 100 L 300 100 L 200 300 z") auto;
        animation: move 4s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Offset property example</h2>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример: вращение значка вокруг точки

Путь circle() заставляет элемент двигаться по кольцу. Установка offset-rotate: 0deg сохраняет его вертикальное положение вместо наклона по кривой.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes orbit {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      .planet {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #1c87c9;
        offset-path: circle(80px at 150px 150px);
        offset-rotate: 0deg;
        animation: orbit 5s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Orbit example</h2>
    <div class="planet"></div>
  </body>
</html>

Значения

ЗначениеОписание
offset-positionНачальная точка пути, когда форма пути не имеет собственного начала координат.
offset-pathФорма, которой следует элемент — SVG path(), circle(), ray() или контур контейнера.
offset-distanceНасколько далеко вдоль пути находится элемент: от 0% (начало) до 100% (конец). Значение, которое обычно анимируют.
offset-anchorТочка элемента, закреплённая на пути (по умолчанию auto — transform-origin элемента).
offset-rotateКак элемент поворачивается вдоль пути: auto — в направлении движения, 0deg — остаётся вертикальным.
initialУстанавливает для свойства его значение по умолчанию.
inheritНаследует свойство от родительского элемента.

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

  • transform — перемещает, поворачивает или масштабирует элемент по прямым осям; обычный запасной вариант, когда пути движения не поддерживаются.
  • animation — управляет @keyframes, которые изменяют offset-distance с течением времени.
  • transition — плавная анимация offset-distance в ответ на изменение состояния вместо ключевых кадров.
  • offset-path, offset-distance, offset-rotate, offset-anchor, offset-position — отдельные длинные свойства с более подробными примерами для каждого.

Практика

Практика
Какова цель свойств offset в CSS?
Какова цель свойств offset в CSS?
Was this page helpful?