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

Last Updated : 09 Sep, 2022

In this article, we will see how to move an element in a circular path using CSS.

Approach:

We will create an HTML element, and add some CSS styles to it.
We will use the animation property to add an animation effect to move the element in a circular path.
Add some CSS styles to set the width, height, border-radius, and background-color of the box i.e. we create a circle of green color.
We will create an HTML div element, and we add an animation property to set the animation effect.
The animation rotates the element at 360 deg in 100px translation and makes the circular path.

CSS for animation:

Syntax:

.box {
    // Box style
    animation: animation_name animation_property
}

@keyframe animation_name {
  ...
}

Example 1: In this example, we will move the HTML div element in a circular path. The animation rotates the element in 360 deg in 100px translation and makes a circular path.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        How to move an element in a  
        Circular Path using CSS ? 
    </title> 
      
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
        } 
  
        h3 { 
            text-align: center; 
            margin-bottom: 100px; 
        } 
  
        .box { 
            width: 50px; 
            height: 50px; 
            border-radius: 50%; 
            margin: auto; 
            background-color: green; 
            animation: GFG 5s infinite linear; 
        } 
  
        @keyframes GFG { 
            0% { 
                transform: rotate(0deg)  
                      translateY(100px) rotate(0deg); 
            } 
  
            100% { 
                transform: rotate(360deg)  
                      translateY(100px) rotate(-360deg); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to move an element in a  
        Circular Path using CSS ? 
    </h3> 
  
    <div class="box"></div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will move the image element in a circular path in an anti-clock direction.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        How to move an element in a 
        Circular Path using CSS ? 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
        } 
  
        h3 { 
            text-align: center; 
            margin-bottom: 100px; 
        } 
  
        img { 
            width: 50px; 
            height: 50px; 
            display: block; 
            margin-left: auto; 
            margin-right: auto; 
            animation: GFG 5s infinite linear; 
        } 
  
        @keyframes GFG { 
            0% { 
                transform: rotate(0deg)  
                    translateX(100px) rotate(0deg); 
            } 
  
            100% { 
                transform: rotate(-360deg)  
                    translateX(100px) rotate(360deg); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to move an element in a 
        Circular Path using CSS ? 
    </h3> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
        alt="GFG"> 
</body> 
  
</html>