CSS3 Rotate Animation

(CSS3 Rotate Animation)

The interesting feature in CSS3, animations help us to animations for elements in out web pages. With CSS3, we can make an image rotating animation. CSS3 animation helps us to make an image rotating, without the use of any jquery or animation plugins. Keyframe property in css3 is used for giving specific events in the animation.

How to create a rotating image with CSS3?

Let us see how to create the animated image with css3 animation and keyframes.

HTML for CSS3 Rotate Animation

<img src="images/rotating_image.png" alt="CSS3 Rotate Animation" width="444" height="445">

CSS for CSS3 Rotate Animation

    
.my_image {
    width: 444px;
    height: 445px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

With the css for my_image we have to add animation function with a name. Here, we are using ‘Spin’ as the name for animation. And with @keyframe, we are adding specific events of animation of the image.

Demo for CSS3 Rotate Animation

CSS3 Rotate Animation

label, , , , , , , , , , , ,

About the author