CSS свойство offset
Use the offset CSS shorthand property for animating an element along the specified path. Read about property values and practice examples.
Свойство offset анимирует элемент вдоль заданного пути.
Это сокращённое свойство для следующих свойств:
В более ранних спецификациях свойство offset называлось «motion».
warning
Это свойство является экспериментальной технологией.
| Начальное значение | auto none 0 auto auto |
|---|---|
| Применяется к | Элементам, подлежащим трансформации. |
| Наследуется | Нет. |
| Анимация | Да. |
| Версия | Motion Path Module Level 1 |
| Синтаксис DOM | Object.style.offset = "auto"; |
Синтаксис
CSS свойство offset
offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;Пример использования свойства offset:
CSS свойство offset
<!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?