How to Move an Element in a Circular Path with CSS offset-path (Motion Path)?

CSSWeb DevelopmentFront End Technology

We can define a motion path for an element using CSS offset-path property.

The syntax of the CSS offset-path property is as follows −

Syntax

Selector {
   offset-path: /*value*/
}

The following example illustrates CSS offset-path property.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5%;
   width: 35px;
   height: 35px;
   offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0');
   animation: round 3000ms infinite ease-in-out;
   background: darkseagreen;
   border-radius: 30%;
}
@keyframes round {
   0% {
      offset-distance: 0%;
   }
   100% {
      offset-distance: 100%;
   }
}
</style>
</head>
<body>
<hr/>
<div></div>
</body>
</html>

Output

This will produce the following result −

raja
AmitDiwan
Published on 13-Mar-2021 12:37:23
Previous Page Print Page
Next Page  
Advertisements