CSS свойство offset-anchor
Используйте CSS свойство offset-anchor для указания точки привязки внутри блока. Читайте о значениях свойства и практикуйтесь на примерах.
CSS-свойство offset-anchor задаёт, какая точка элемента прикрепляется к пути смещения при движении элемента вдоль этого пути. Иными словами, оно отвечает на вопрос: «Когда блок движется вдоль пути, какая точка блока должна следовать по нему — центр, угол или какая-то другая?»
Когда вы анимируете элемент вдоль пути с помощью offset-distance, браузеру нужна опорная точка на блоке, которая будет удерживаться на линии. По умолчанию это центр блока, однако offset-anchor позволяет её переместить. Это аналог transform-origin для движения по пути: вместо выбора точки поворота для вращений и масштабирования вы выбираете точку, которая «скользит» по пути.
Зачем нужен offset-anchor
Без offset-anchor элемент, следующий по пути, центрируется на линии, и половина его выходит за каждую сторону. Изменив точку привязки, можно:
- Сделать так, чтобы по пути шёл верхний левый угол (
offset-anchor: 0 0) — удобно, когда путь представляет собой ведущий край объекта. - Удерживать кончик метки или маркера точно на кривой, тогда как остальная часть блока свисает в сторону.
- Точно выровнять иконку (например, колёса автомобиля, острие стрелки, кончик булавки) так, чтобы она естественно располагалась на маршруте.
Свойство даёт видимый эффект только тогда, когда элемент действительно размещён на пути смещения — сначала задайте offset-path, затем анимируйте offset-distance. offset-anchor входит в сокращённое свойство offset.
offset-anchor является частью экспериментального модуля CSS Motion Path. Поддержка широко распространена в современных браузерах, однако проверяйте актуальную совместимость и предусматривайте корректный запасной вариант (при отсутствии поддержки элемент просто отображается в своей обычной позиции в потоке).
| Начальное значение | auto |
|---|---|
| Применяется к | Трансформируемым элементам. |
| Наследуется | Нет. |
| Анимируется | Да. |
| Версия | Motion Path Module Level 1 |
| DOM-синтаксис | object.style.offsetAnchor = "right top"; |
Синтаксис
CSS-синтаксис offset-anchor
offset-anchor: auto | <position>;Пример свойства offset-anchor:
Пример кода CSS offset-anchor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</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>В этом примере зелёно-синий блок .box движется вдоль той же кривой, которую рисует <svg>-трек. При offset-anchor: center (поведение по умолчанию для auto) центр блока удерживается на линии. Попробуйте изменить значение на 0 0 или right bottom, чтобы увидеть, как другая точка блока следует по пути.
Значения
offset-anchor принимает ключевое слово auto или любое значение типа CSS <position> — того же вида, что используется для background-position.
| Значение | Описание |
|---|---|
auto | Центр блока. |
<position> | <percentage> — Процентное значение горизонтального смещения вычисляется относительно ширины блока с отступами. Процентное значение вертикального смещения вычисляется относительно высоты блока с отступами. <length> — Значение длины задаёт смещение от верхнего левого угла блока с отступами. |
initial | Устанавливает для свойства значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Когда используется offset-anchor: auto, точка привязки принимает значение offset-position (которое по умолчанию соответствует центру блока), и блок центрируется на пути.
Связанные свойства
offset-anchor — одна из составляющих набора инструментов CSS Motion Path. Как правило, оно используется совместно с:
offset-path— задаёт линию или фигуру, вдоль которой движется элемент.offset-distance— расстояние, на которое элемент помещается вдоль пути (анимируйте это свойство, чтобы элемент перемещался).offset-position— начальная точка, используемая когдаoffset-pathравенnoneили когда точка привязки —auto.offset-rotate— поворачивается ли элемент в направлении движения.offset— сокращённое свойство, задающее всё перечисленное выше сразу.