offset-path
CSS offset-path Property
The offset-path CSS property is used to specify a movement path for an element to follow and defines the element’s position.
The position on the path is determined by the offset-distance property.
In the earlier versions of the specification, the name of offset-path was ‘‘motion-path’’. However, it was changed to offset-path as the property specifies static positions.
The offset-path property is not animated, it just defines the path for animation.
This offset property is an experimental technology.
If you have defined offset-path in CSS, you can use JavaScript to control the animation.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | Motion Path Module Level 1 |
| DOM Syntax | object.style.offsetPath = “ray()”; |
Syntax
Syntax
offset-path: none | ray() | path() | <url> | <basic-shape>;
Example of the offset-path property with the offset-rotate and animation properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 30%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-path property example</h2>
<div class="mover"></div>
</body>
</html>
Example of the offset-path property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #666;
}
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 100 50 h 150 v 150');
}
#box1 {
background-color: #8ebf42;
offset-distance: -280%;
}
#box2 {
background-color: #1c87c9;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| none | No motion path is specified. This is the default value of this property. |
| ray() | A line segment which starts from the position of the box and proceeds in the direction defined by the specified angle. |
| url() | References the ID of an SVG element to be used as a movement path. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |