offset-distance

Baseline 2022

Новинка

С сентября 2022 года данная функция работает на последних версиях устройств и браузеров. Возможно, она не будет работать на более старых устройствах или браузерах.

Свойство offset-distance CSS определяет позицию элемента вдоль offset-path.

Попробуйте

Синтаксис

/* Default value */
offset-distance: 0;

/* the middle of the offset-path */
offset-distance: 50%;

/* a fixed length positioned along the path */
offset-distance: 40px;

/* Global values */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;

<length-percentage>

Длина, указывающая на расстояние элемента вдоль траектории (определённой с помощью offset-path).

100% соответствует всей длине траектории (когда offset-path определена как базовая форма или path()).

Формальное определение

Начальное значение	`0`
Применимо к	элементам, подлежащим преобразованию
Наследуется	нет
Проценты	относятся к общей длине траектории
Вычисленное значение	для `<length>` абсолютное значение, иначе процент
Тип анимации	длина, процент или calc();

Формальный синтаксис

offset-distance = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Использование offset-distance в анимации

Аспект движения в CSS Motion Path обычно определяется анимацией свойства offset-distance. Если вы хотите анимировать элемент по всей траектории, вы определите его offset-path, а затем выполните анимацию, изменяя offset-distance от 0% до 100%.

HTML

<div id="motion-demo"></div>

CSS

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Результат

Спецификации

Спецификация
Motion Path Module Level 1 # offset-distance-property

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`offset-distance`	5546	7979	72	4233	16	5546	79	4233	16	6.05.0	5546

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance