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
To Continue Learning Please Login
Login with Google