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

Свойство offset-anchor устанавливает опорную точку блока на траектории.

Данное свойство находится в экспериментальной стадии.
Значение по умолчанию auto
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Да
Версия Motion Path Module Level 1
DOM синтаксис object.style.offsetAnchor = "right top";

Синтаксис

offset-anchor: auto | <position>;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-color: #ccc;
      padding: 0 50px;
      width: 100%;
      }
      svg, .box {
      position: absolute;
      }
      .box {
      animation: move 3s 0ms infinite alternate ease-in-out;
      background: linear-gradient(#8ebf42 50%,#1c87c9 50%);
      height: 50px;
      width: 50px;
      offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
      }
      @keyframes move {
      100% {
      offset-distance: 100%;
      }
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства offset-anchor</h2>
    <svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
      <path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
    </svg>
    <div class="box"></div>
  </body>
</html>

Значения

Значение Описание
auto Имеет значение свойства offset-position, если это значение не "auto", а значение offset-path не "none".
<position>

<percentage>- Процент горизонтального смещения относителен к ширине области контента. Процент вертикального смещения относителен к высоте области контента.


<length>- Указывает высоту смещения начиная с левого верхнего угла блочной области контента.

initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
46.0+ 33.0+

Практикуйте свои знания

Какое назначение CSS свойства 'offset-anchor'?
Считаете ли это полезным?