Rotate a circle with CSS

Ever wonder how people animate images or anything? Like this image below?? Well today is your lucky day, It turns out to be simple to make.

Disclaimer: Having basic CSS Animation knowledge would really help.

Start with the basic HTML template. You can use any image



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Rotating Circle</title>
    <link rel="stylesheet" type="text/css" href="circle.css">
</head>
<body>
    <h1>CSS Rotating Circle</h1>

    <main>
        <div>
            <img src="iconmonstr-circle-5.svg" alt="circle">
        </div>
    </main>
</body>
</html>

This boring Image should show up on the browser.

Let's spice it up a little, shall we?



/* circle.css */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 20px 0px;
    font-family: Arial;
}
main{
    height: 500px;
    display: grid;
    align-items: center;
}

you can use other trick to center the contents, I went with Grid display: grid; and align-items: center;.

Increase the image size a little with the style below, since we are using an SVG image.



main img{
    width: 200px;
    height: 200px;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
}

border-radius can be optional. Everything should look cute now like the image below.

We can't animate anything if we don't have the @keyframes specified.



@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

And voilà, its done. Also note that animation-name: and @keyframes share the same name rotate.

You can play with it or even add more functionality to it, like starting and stopping the animation with JavaScript.

Thanks for reading.

Blog

Rotate a circle with CSS

Benjamin Thorpe

Join Our Newsletter. No Spam, Only the good stuff.

Related