How to create circle animation using CSS?

In this article we are learning about How to create circle animation using CSS. For circle animation we are using animation property.

Following code used to create circle animation:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #454a59ab;
}
.circle-animation {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100px; /* Adjust the width*/
height: 100px; /* Adjust the height*/
}
.circle-animation:before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 176px;
background-color: #ad2417;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.circle-animation:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 50px; /* Adjust the width*/
height: 50px; /* Adjust the height*/
background-color: #cb6426;
border-radius: 50%;
box-shadow: 0px 0px 25px #ffff006b;

}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
</style>
</head>
<body>
<div class="circle-animation"></div>
</body>
</html>

This CSS block defines the styles for the .circle-animation class. It sets the position of the element to be centered both horizontally and vertically on the page using the left: 50%; and top: 50%; properties along with the transform: translateX(-50%) translateY(-50%); property. The width and height properties are set to 100px, which determines the size of the circle.

.circle-animation {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100px;
height: 100px;
}

The .circle-activity: before selector focuses on a pseudo-component that is put before the .circle-liveliness component. This pseudo-component is utilized to make a circle with a throbbing ring impact. The material: property is vital for pseudo-components. The position: relative; property is utilized to permit situating inside the parent component. The screen: block; property guarantees the component is shown as a block component.

.circle-animation:before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 176px;
background-color: #ad2417;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

The animation property applies the pulse-ring animation to the pseudo-element. This animation lasts for 1.25s (1.25 seconds) and uses the cubic-bezier timing function with specific values. The infinite keyword is used to make the animation repeat indefinitely.

How to create circle animation using css

How to create circle animation using CSS?

Related Post

Learn By Preet