How to Move an Element in a Circular Path with CSS?

CSSWeb DevelopmentFront End Technology

CSS animations can help us transform elements in various ways by combining, rotating and translate.

The following examples illustrates how we can move an element in circular path.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 8%;
   width: 35px;
   height: 35px;
   border-radius: 5px;
   background: red;
   animation: move 3s infinite linear;
}
@keyframes move {
   0% {
      transform: rotate(0deg) translateX(40px) rotate(0deg);
   }
   100% {
      transform: rotate(360deg) translateX(40px) rotate(-360deg);
   }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Output

This will produce the following result −

raja
AmitDiwan
Published on 13-Mar-2021 12:38:09
Previous Page Print Page
Next Page  
Advertisements