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=
alt="GFG">
</body>
</html>
|
Output: