How to Rotate Animation in CSS

Whether it’s improving a button, killing time while page loads, or adding a little additional flair to a landing page, the animation is efficient to keep readers’ attention and delight them on your website.

While there are various methods for adding animated visuals to a web page, one of the simplest is to use CSS animations, which take more than a bit of HTML and CSS knowledge to pull off.

If you want to employ CSS animations in your work, it’s good to look at some examples of successful CSS animations before jumping in. This additional study can help you get ideas for your projects and show you what you can do with this vital feature.

You’ll need three things to construct a CSS animation:

• An HTML element to animate;
• A CSS rule that connects the animation to this element;
• A series of keyframes specify the styles at the beginning and end of the animation.

Declarations, such as speed and delay, can be used to tailor your animation further. Now, let us look at some examples of rotate animation in CSS.

Use CSS Animations to Rotate Image Continuously

We will add the CSS command to the element we wish to rotate in this example. You can adjust the 2s to slow or speed up the rotation duration and rotate to 360 degrees in animation.

Example:

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Output: The image will be rotated to a full 360 degrees.

We’ll need some HTML markup containing an image and some properties for the following example. As you can see, our picture element has three classes: rotate, linear, and infinite.

Each class requires its declaration block in our CSS. In animation, rotate to 360 degrees and modify the 2s to slow or speed up the rotation length.

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Output: The image will be rotated to a full 360 degrees.