offset-distance
CSS offset-distance Property
The offset-distance property is used to specify the position along the offset-path.
It accepts the following values: “length” and “percentages”. The default value is 0.
Negative values are valid.
This offset property is an experimental technology.
In early versions of the specification, this property was called motion-offset.
| 类目 | 类目 |
|---|---|
| Initial Value | 0 |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | Motion Path Module Level 1 |
| DOM Syntax | object.style.offsetDistance = “100%”; |
Syntax
Syntax
offset-distance: <length-percentage>;
Example of the offset-distance property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 80px;
height: 80px;
background: linear-gradient(#eee 50%, #1c87c9 50%);
position: absolute;
left: 20%;
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 4s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-distance property example</h2>
<div class="mover"></div>
</body>
</html>
Example of the offset-distance property specified in percentage:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scissorHalf {
offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190');
animation: followpath 4s linear infinite;
}
@keyframes followpath {
to {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-distance property example</h2>
<svg class="box" width="700" height="450" viewBox="350 0 1400 900">
<title>House and Scissors</title>
<rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
<polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
<polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
<path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
<path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
</svg>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| <length-percentage> | Both length and percentage specify the starting position of the offset path to the end position. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |