In this example, we will learn how to rotate an element on a loop using CSS. We can use the animation
property and @keyframes
to make a rotate animation of an element.
HTML
<span class="example"></span>
CSS
.example {
border: 4px solid black;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Output
Here, we create a square element using width
and height
property and set a solid black border using the border
property. We made the element rotate using the @keyframes
property and animate the rotating square on loop every two seconds using the animation
property.
In this example, we learned how to rotate an element on a loop using CSS. We created a square box using height
, width
and border
properties and animated a rotating square using the animation
property and @keyframes
.