In this tutorial, we will learn how to rotate our element infinitely using CSS properties. We will understand this with the help of an interesting and easy-to-understand example. So firstly, we will focus on the @keyframes rule in CSS.
@keyframes is a rule in the CSS. It defines animation properties for any element. @keyframes consists of percentages which helps the user to apply the animation of his choice. It starts from 0% and ends at 100%. The user can apply any animation properties like rotation, change in background colour etc. Here, we focus mainly on rotation, for rotation, we use the transform property of CSS. With the transform property, the user can rotate, move, scale and skew the elements. So let’s understand the infinite rotation of an element with an example.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Rotation</title>
<style>
body{
background-color: aquamarine;
}
@keyframes infiniteRotation {
0%{
transform: rotate(0deg);
background-color: blueviolet;
}
50%{
transform: rotate(180deg);
background-color: aqua;
}
100%{
transform: rotate(360deg);
background-color: blue;
}
}
.container{
font-size: 3vh;
text-align: center;
display: flex;
justify-items: auto;
margin: 200px;
padding: auto;
}
.element1{
height: 300px;
width:300px;
animation: infiniteRotation 4s linear infinite;
border: 2px solid black;
margin-right: 50px;
display: flex;
align-items: center;
}
.element2{
border-radius: 50%;
animation: infiniteRotation 10s linear infinite;
height: 300px;
width: 300px;
margin-left: 50px;
display: flex;
align-items: center;
border: 2px solid white;
}
.element3{
border-radius: 10%;
animation: infiniteRotation 8s infinite;
height: 300px;
width: 300px;
margin-left: 100px;
display: flex;
align-items: center;
border: 2px solid rgb(74, 14, 227);
}
</style>
</head>
<body>
<div class="container">
<div class="element1">
IT'S ROTATING FOR 4 SECONDS TO COMPLETE ONE ROTATION, SO THIS IS
FASTER.
</div>
<div class="element2">
IT'S ROTATING FOR 10 SECONDS TO COMPLETE ONE ROTATION, SO THIS IS
SLOWER.
</div>
<div class="element3">
ITS ROTATING FOR 8 SECONDS TO COMPLETE ONE ROTATION. IT DOESN'T
HAVE LINEAR PROPERTY SO IT'S STOPPING FOR A WHILE AFTER EACH
ROTATION.
</div>
</div>
</body>
</html>
In the above example, there are three div elements. The element1, having a square shape takes 4 seconds to complete one rotation. In @keyframes, you can see that there are three percentages 0% (starting the rotation), 50%(completing the half rotation) and 100%(completing the full rotation). Similarly, element2, having a circle shape takes 10 seconds to complete one rotation and element3 takes 8 seconds for one rotation.
Now you can focus on the CSS styling of these three elements, the animation property is given, in that infiniteRotation is the name of the animation which is assigned using the @keyframes rule i.e. a complete rotation from 0 degree to 360 degree changing its background colour at 0%,50% and 100%. In animation property, we use linear for a smooth transition from one rotation to another, maintaining uniform speed.
In element1 and element2, linear is used and hence first two div elements have constant speed whereas in element3 we didn’t use linear hence in element3 after one rotation the element stops for a while and then starts its rotation again and also while rotating from 0% to 100%, the speed of element3 is not constant.
Also, in animation property, infinite is included to ensure that the elements rotate continuously. If we do not use infinite, then the element will stop rotating after one rotation.
Also for rotation of an element, it’s not necessary to include transform in 50%. The output will remain the same.
@keyframes infiniteRotation {
0%{
transform: rotate(0deg);
background-color: blueviolet;
}
50%{
background-color: aqua;
}
100%{
transform: rotate(360deg);
background-color: blue;
}
}
The output of the above code is Output.