How to Move an Element in a Circular Path using CSS ? Last Updated : 09 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How to Animate Rainbow Heart from a Square using CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to rotate an element using CSS ? The purpose of this article is to rotate an HTML element by using CSS transform property. This property is used to move, rotate, scale and to perform various kinds of transformation of elements. The rotate() function can be used to rotate any HTML element or used for transformations. It takes one pa 1 min read How to Draw a Semi-Circle using HTML and CSS ? To draw a semi-circle using HTML and CSS, Use the 'border-radius' property in combination with a square-shaped container div. Set border-radius to create a circular shape, and then use additional CSS to clip one half, forming a semi-circle. Approach:First create a HTML structure, specifying language 1 min read How to create circular progress bar using SVG ? In this article, we will learn how to create a circular progress bar using SVG. Let us begin with the HTML part. In the SVG circle, the cx and cy attributes define the x and y coordinates of the circle. If cx and cy are not taken to the circle's center, it is set to (0,0). The r attribute defines th 3 min read How to bind an animation to a division element using CSS ? In this article, we will learn to bind an animation to a div tag using CSS.A div tag is used to separate the different sections of the contents of the webpage. It makes it very easy for the readers to notice the different sections of the webpage with their specific importance levels on the page. The 3 min read How to Animate Rainbow Heart from a Square using CSS ? In this article, you will learn how to make a magical heart using only CSS. Animations in CSS are a widely fascinating part of CSS. We will be creating a heart that changes color every 3 seconds. We will be creating the animation in two steps. 1. Building the heart: In this step we will be building 3 min read How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader, 6 min read Like