offset-position

Baseline 2022

Новое

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

Свойство offset-position CSS определяет начальное положение элемента вдоль траектории. Это свойство обычно используется в сочетании со свойством offset-path для создания эффекта движения. Значение offset-position определяет, где элемент размещается изначально для перемещения по смещенной траектории, если функция offset-path, такая как path(), не указывает собственное начальное положение.

Свойство offset-position является частью системы движения, основанной на составных свойствах offset, включая offset-anchor, offset-distance и offset-path. Эти свойства работают вместе для создания различных эффектов движения по траектории.

Синтаксис

/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

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

Значения

normal: Указывает, что у элемента нет начального смещения, и размещает элемент в 50% 50% содержащего блока. Это значение по умолчанию.
auto: Указывает, что начальное смещение — это верхний левый угол области элемента.
<position>: Определяет положение как координату x/y для размещения элемента относительно границ его области. Положение можно определить с помощью одного до четырёх значений. Если используется два не ключевых значения, первое значение представляет горизонтальное положение, а второе — вертикальное. Если указано только одно значение, второе значение считается center. Если используется три или четыре значения, значения <length-percentage> являются смещениями для предшествующих ключевых значений. Более подробное описание этих типов значений см. в background-position.

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

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

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

offset-position = 
  normal      |
  auto        |
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

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

Примеры

Установка начального offset-position для offset-path

В этом примере свойство offset-path используется для определения пути, по которому должен перемещаться элемент cyan. Значение функции path() CSS — это SVG-траектория, описывающая кривую. Элемент перемещается по этой кривой во время анимации move.

HTML

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

CSS

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

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

Результат

Сравнение различных начальных смещений

В этом примере визуально сравниваются различные начальные положения смещения элемента, когда для указания значения свойства offset-path используется ray(). Число внутри области элемента указывает элемент, к которому применяется CSS, а также точку привязки элемента.

.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Результат

В box0, отсутствие свойства offset-path означает, что offset-position любого значения normal или auto не имеет никакого эффекта. Когда offset-position равно normal, луч начинается от центра содержащего блока (т.е., 50% 50%). Это — начальное положение смещения по пути, которое используется, если не указано offset-position. Обратите внимание на разницу между начальными смещениями auto и left top. Значение auto выравнивает точку привязки элемента к его собственному верхнему левому углу, а значение left top выравнивает точку привязки элемента к верхнему левому углу содержащего блока.

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

Спецификация
Модуль траекторий движения уровня 1 # offset-position-property

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`offset-position`	116	116	122	102	16	116	122	78	16	24.0	116
`auto`	116	116	122	102	16	116	122	78	16	24.0	116
`normal`	116	116	122	102	17.2	116	122	78	17.2	24.0	116

См. также

© 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-position