CSS3 Rotate Animation

0 votes
<img class="image" src="" alt="" width="120" height="120">

Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.

I guess something's wrong with the CSS below, as it just stays still.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

Jun 22, 2022 in CSS by Edureka
• 13,620 points
449 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
0 answers

Looping Animation of text color change using CSS3

I have text that I want to ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
1,081 views
0 votes
1 answer

Splide.js text animation between slides with animate.css classes

The event callback functions contain an event ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
2,214 views
0 votes
0 answers

How do I rotate text in css?

How can I rotate text using CSS ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
509 views
0 votes
0 answers

background-size in shorthand background property (CSS3)

I'm trying to mix background-image and background-size properties in a shorthanded background property. ...READ MORE

Jul 6, 2022 in CSS by Edureka
• 13,620 points
710 views
0 votes
0 answers

Loading image using CSS animation VS loading using GIF image

I ran the following tests to see ...READ MORE

Jul 6, 2022 in CSS by Edureka
• 13,620 points
607 views
0 votes
0 answers

CSS3 selector :first-of-type with class name?

Is it possible to choose the first ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
278 views
0 votes
1 answer

CSS3 Rotate Animation

I noticed that there is an ERROR ...READ MORE

answered Feb 18, 2022 in Others by Aditya
• 7,680 points
490 views
0 votes
0 answers

How to rotate image with CSS only?

With CSS alone, I want to rotate ...READ MORE

Aug 22, 2022 in CSS by Edureka
• 13,620 points
1,540 views
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8, 2022 in Java by Soham
• 9,700 points
1,558 views
0 votes
0 answers

Replacing H1 text with a logo image: best method for SEO and accessibility?

i want to link my logo to ...READ MORE

Feb 14, 2022 in Others by Kichu
• 19,050 points
2,755 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP