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

Свойство CSS offset-position определяет начальную точку пути смещения элемента — позицию, в которой элемент находится до того, как он будет перемещён вдоль пути с помощью offset-distance.

Свойства пути движения позволяют анимировать элемент по произвольному маршруту (линии, кривой, лучу) без использования @keyframes для top/left. Сам путь задаётся с помощью offset-path; offset-position отвечает на вопрос «где начинается этот путь?» в том случае, когда путь не определяет собственную начальную точку.

Когда это нужно

offset-position имеет значение только для путей, начальная точка которых не задана в самих данных пути:

Оно применяется, когда offset-path является функцией ray() или обычным path(), использующим неявную начальную точку.
Оно игнорируется, когда offset-path является geometry-box (например, border-box) или <basic-shape> (например, circle()), поскольку они определяют собственную точку отсчёта.
Оно также игнорируется, когда position элемента имеет значение static, так как элемент не извлекается из нормального потока.

Типичное значение offset-position: 50% 50% начинает путь движения в центре содержащего блока; auto начинает его в позиции собственного блока элемента.

Внимание

Это всё ещё экспериментальная функция пути движения. Поддержка браузерами неполная (Chromium реализует её; Firefox и Safari отстают), поэтому перед использованием в продакшене проверьте актуальную поддержку и предусмотрите запасной вариант.

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

Синтаксис

Синтаксис CSS offset-position

offset-position: auto | <position> | initial | inherit;

Где <position> принимает от одного до четырёх значений, точно так же как background-position: одно значение задаёт горизонтальную позицию (вертикальная по умолчанию равна center), два значения задают горизонтальную, а затем вертикальную, и допускается комбинирование ключевых слов с длинами.

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

Элемент ниже начинает путь движения в точке 100px 100px внутри контейнера и следует по ray(45deg):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

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

Результат

Значения

Значение	Описание
auto	Указывает, что начальная позиция — это позиция блока, заданная свойством position.
`<position>`	Задаёт начальную позицию, используя содержащий блок в качестве области позиционирования и точку без размеров (блок нулевого размера) в качестве области объекта. Значение может быть задано с помощью от одного до четырёх значений. Если определено одно значение, второе считается равным center. Если указаны два не-ключевых слова, первое представляет горизонтальную позицию, второе — вертикальную. Если указаны три или четыре значения, значения длин/процентов являются смещениями для предшествующих ключевых слов (подробнее см. свойство background-position).
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства пути движения

offset-position — один из элементов модуля CSS Motion Path. Обычно оно используется в сочетании с:

offset-path — маршрут, по которому движется элемент.
offset-distance — насколько далеко по маршруту находится элемент в текущий момент (анимируйте это для создания движения).
offset-anchor — какая точка элемента размещается на пути.
offset-rotate — поворачивается ли элемент и как именно при движении по пути.

Практика

Какие существуют типы CSS-свойств offset?