CSS - offset-distance Property
An element's location along a offset-path is determined by its offset-distance CSS property, which specifies where it should be positioned.
Possible Value
<length-percentage> - The distance an element travels along a specific path is indicated by the length given by the offset-distance attribute.
It reflects the whole length of the route specified by offset-path when set to 100%.
Applies to
Transformable elements
Syntax
offset-distance = <length-percentage>
CSS offset-distance - Percentage Value
The following example demonstrates the usage of offset-distance property.
<html>
<head>
<style>
#offset-shape {
offset-path: path("M 10 80 Q 95 10 180 80 T 310 80");
animation: move 4000ms infinite linear;
width: 60px;
height: 40px;
background: #FFD700;
border-radius: 50%;
position: relative;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<div id="offset-shape"></div>
</body>
</html>
CSS offset-distance - With Two Elements
The following example demonstrates the usage of offset-distance property.
<html>
<head>
<style>
.offset-shape {
width: 60px;
height: 60px;
border-radius: 25%;
position: absolute;
}
#shape1 {
offset-path: path("M 20 80 Q 80 10 320 80 T 620 80");
animation: move1 6000ms infinite linear;
background: #2715cf;
}
#shape2 {
offset-path: path("M 50 10 L 320 90 L 10 90 Z");
animation: move2 4500ms infinite alternate ease-in-out;
background: #cf159a;
}
@keyframes move1 {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
@keyframes move2 {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<div id="shape1" class="offset-shape"></div>
<div id="shape2" class="offset-shape"></div>
</body>
</html>
Advertisements