How to create a CSS animation that rotates an element continuously

Arif Billah Babu

          

  CSS



Image not found!!


To create a CSS animation that rotates an element continuously, you can use the @keyframes rule along with the transform property. Here's a simple example:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .rotate-element {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: rotate 5s linear infinite; /* 5s duration, linear easing, infinite loop */
        }
    </style>
</head>
<body>

    <div class="rotate-element"></div>

</body>
</html>

In this example:

  1. We define a @keyframes rule named rotate with two keyframes: 0% and 100%. The transform property is used to specify the rotation at each keyframe.

  2. We create a class .rotate-element for the element you want to rotate. In this case, it's a simple square div with a blue background.

  3. The animation property is applied to the .rotate-element class, specifying the name of the keyframes (rotate), the duration of the animation (5s), the timing function (linear for a constant speed), and infinite to make it loop continuously.

Adjust the properties according to your requirements. You can change the duration, easing function, and other animation properties as needed.

Category List