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

Свойство offset-distance указывает положение элемента на траектории (offset-path).

Свойство имеет следующие значения: "length" и "percentages". Значение по умолчанию - 0.

Отрицательные значения допустимы.

Данное свойство находится в экспериментальной стадии.

Значение по умолчанию	0
Применяется	К трансформируемым элементам.
Наследуется	Нет
Анимируемое	Да
Версия	Motion Path Module Level 1
DOM синтаксис	object.style.offsetDistance = "100%";

Синтаксис

offset-distance: <length-percentage>;

Пример

<!DOCTYPE html>
<html>
  <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>
  <body>
    <h2>Пример свойства offset-distance</h2>
    <div class="mover"></div>
  </body>
</html>

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

Рассмотрим другой пример со свойством offset-distance:

Пример

<!DOCTYPE html>
<html>
  <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>
  <body>
    <h2>Пример свойства offset-distance</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>	Length и percentage указывают начальное и конечное положение траектории.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.