смещение

Базовая линия 2022

Новое

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

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

Примечание: Ранние версии спецификации называли это свойство motion.

Попробовать

Составные свойства

Это свойство является сокращением следующих свойств CSS:

Синтаксис

/* Offset position */
offset: auto;
offset: 10px 30px;
offset: none;

/* Offset path */
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

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

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

Начальное значение	как каждое из свойств сокращения: `offset-position`: `normal` `offset-path`: `none` `offset-distance`: `0` `offset-anchor`: `auto` `offset-rotate`: `auto`
Применимо к	преобразуемым элементам
Наследуется	нет
Проценты	как каждое из свойств сокращения: `offset-position`: относятся к размеру содержащего блока `offset-distance`: относятся к общей длине пути `offset-anchor`: относительно ширины и высоты справочного блока элемента
Вычисленное значение	как каждое из свойств сокращения: `offset-position`: для `<length>` абсолютное значение, в противном случае процент `offset-path`: как указано `offset-distance`: для `<length>` абсолютное значение, в противном случае процент `offset-anchor`: для `<length>` абсолютное значение, в противном случае процент `offset-rotate`: как указано
Тип анимации	как каждое из свойств сокращения: `offset-position`: позиция `offset-path`: по типу вычисленного значения `offset-distance`: длина, процент или calc(); `offset-anchor`: позиция `offset-rotate`: как <угол>, <базовая фигура> или <path()>
Создаёт контекст стекирования	да

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

offset = 
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?  

<offset-position> = 
  normal      |
  auto        |
  <position>  

<offset-path> = 
  none                          |
  <offset-path> || <coord-box>  

<offset-distance> = 
  <length-percentage>  

<offset-rotate> = 
  [ auto | reverse ]  ||
  <angle>             

<offset-anchor> = 
  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> ]  

<offset-path> = 
  <ray()>        |
  <url>          |
  <basic-shape>  

<coord-box> = 
  <paint-box>  |
  view-box     

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

<ray()> = 
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )  

<url> = 
  <url()>  |
  <src()>  

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<ray-size> = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Примеры

Анимация элемента вдоль пути

HTML

<div id="offsetElement"></div>

CSS

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

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}

Результат

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

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

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`offset`	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