offset
CSS offset Property
The offset property animates an element along the specified path.
It is a shorthand property for the following properties:
offset-position
offset-path
offset-anchor
offset-rotate
offset-distance
The offset property was called “motion” in the earlier specification.
This property is an experimental technology.
| 类目 | 类目 |
|---|---|
| Initial Value | auto none 0 auto auto |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | Motion Path Module Level 1 |
| DOM Syntax | Object.style.offset = “auto”; |
Syntax
Syntax
offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;
Example of the offset property:
<!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>
Values
Values
| Value | Description |
|---|---|
| offset-position | Specifies the initial position of the offset path. |
| offset-path | Specify a movement path for an element to follow. |
| offset-distance | Specifies the position along the offset-path. |
| offset-anchor | Defines an anchor point of the box along the offset path. |
| offset-rotate | Specifies the orientation of an element. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |