CSS Examples

How to Rotate an Element on a Loop using CSS

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.

Prerequisites

Example

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.

Conclusion

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.