Hey this is one of the interesting concept, Now we will see how to create circular rotate object animation using simple CSS. Here each and every object is rotating for specified timeframe. The time frame mentioned by using the css property animation-delay, using this animation-delay will maintain the time interval of each objects.
All the objects are rotating itself and also rotating circular manner. It is really nice CSS concept, we will use this type of animation in our website to present the objects and icons. Look at the live demo to see the animation effect. I hope this example is really useful.
Code for Circular rotate animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular rotate animation using css3</title>
<style>
body {
display: grid;
justify-content: center;
align-content: center;
background-color: #1f1302;
width: 100vw;
height: 100vh;
}
.main {
width: 550px;
height: 550px;
border-width: 2px;
display: grid;
justify-content: center;
align-content: center;
}
.main > * {
grid-column: 1;
grid-row: 1;
}
.san-center {
width: 140px;
height: 140px;
position: absolute;
top: 53%;
left: 46%;
}
.item {
animation: spinAround 12s linear infinite;
}
.main > * > img {
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg) translate(140px) scale(.25);
}
to {
transform: rotate(360deg) translate(140px) scale(.25);
}
}
</style>
</head>
<body>
<div class="main">
<img class="san-center" src="services.png">
<div class="item" style="animation-delay: -2s;">
<img src="3d.png">
</div>
<div class="item" style="animation-delay: -4s;">
<img src="digita.png">
</div>
<div class="item" style="animation-delay: -6s;">
<img src="elearning.png">
</div>
<div class="item" style="animation-delay: -8s;">
<img src="graphics.png">
</div>
<div class="item" style="animation-delay: -10s;">
<img src="web.png">
</div>
<div class="item" style="animation-delay: -12s;">
<img src="ar-vr.png">
</div>
</div>
</body>
</html>
0 Comments