CSS свойство offset
Свойство offset анимирует элемент вдоль заданного пути.
Это сокращённое свойство для следующих свойств:
В более ранних спецификациях свойство offset называлось «motion».
WARNING
Это свойство является экспериментальной технологией.
| Начальное значение | auto none 0 auto auto |
|---|---|
| Применяется к | Элементам, подлежащим трансформации. |
| Наследуется | Нет. |
| Анимация | Да. |
| Версия | Motion Path Module Level 1 |
| Синтаксис DOM | Object.style.offset = "auto"; |
Синтаксис
CSS свойство offset
css
offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;Пример использования свойства offset:
CSS свойство offset
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
div {
width: 60px;
height: 60px;
background-color: #8ebf42;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 4s linear infinite;
}
</style>
</head>
<body>
<h2>Offset property example</h2>
<div></div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| offset-position | Задает начальную позицию пути смещения. |
| offset-path | Задает путь движения, по которому должен следовать элемент. |
| offset-distance | Задает позицию вдоль пути смещения. |
| offset-anchor | Определяет якорную точку блока вдоль пути смещения. |
| offset-rotate | Задает ориентацию элемента. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
В чем назначение свойств offset в CSS?