Infinite rotation using CSS3

This post is about creating infinite rotation using CSS3 only. For creating this infinite rotation effect there is no need to use any JavaScript code. It can be easily accomplished by small CSS3 code snippet. It is compatible with the latest web browsers. This infinite spinning effect is created using @keyframes property of CSS3. You can modify this code according to your own choice for rotating images or other HTML elements.

Infinite rotation using CSS3

 

View Demo

HTML code

<div id='container' class='your-infinite-rotation'></div>

 

CSS code

#container {
    width: 100px;
    height: 100px;
    background: url('gears.png');
    margin: 0px auto;
}
@keyframes your-infinite-rotation {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }     to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-webkit-keyframes your-infinite-rotation {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }     to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
.your-infinite-rotation {
    -webkit-animation: your-infinite-rotation 3s linear infinite;
    -o-animation: your-infinite-rotation 3s linear infinite;
    animation: your-infinite-rotation 3s linear infinite;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

2 comments