CSS3 Rotate Animation

0 votes

I couldn’t find a way to 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. Have shared the CSS below:-

.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); 
              } 
          }
}
Feb 18 in Others by Soham
• 9,670 points
88 views

1 answer to this question.

0 votes

I noticed that there is an ERROR with your CSS so follow the correct animation CSS as mentioned below:-

.image { 

        position: absolute; 
        top: 50%; 
        left: 50%; 
        width: 120px; 
        height: 120px; 
        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); 
    } 
}

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

answered Feb 18 by Aditya
• 7,660 points

Related Questions In Others

0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
614 views
0 votes
0 answers

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get ...READ MORE

Jun 22 in CSS by Edureka
• 12,390 points
93 views
0 votes
0 answers

How to rotate image with CSS only?

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

Aug 22 in CSS by Edureka
• 12,390 points
423 views
0 votes
1 answer

Render HTML to an image

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

answered Feb 8 in Java by Soham
• 9,670 points
822 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 in Others by Kichu
• 19,040 points
1,896 views
0 votes
0 answers

Looping Animation of text color change using CSS3

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

Jun 22 in CSS by Edureka
• 12,390 points
230 views
0 votes
1 answer

How can I rotate axis labels in R ?

library(ggplot2) p <- data.frame(Day=c("2011-04-11", "2014-05-24","2004-01-12","2014-06-20","2010-08-07","2014-05-28"), Impressions=c(24010,15959,16107,21792,24933,21634),Clicks=c(211,106,248,196,160,241)) p       ...READ MORE

answered May 18, 2018 in Data Analytics by zombie
• 3,790 points
1,413 views
0 votes
1 answer

Rotate elements of array by n position

Here is what I came up with,  import ...READ MORE

answered Mar 3, 2019 in Java by Priyaj
• 58,100 points
228 views
0 votes
3 answers

How to rotate an array from a particular index?

Muchas gracias. ?Como puedo iniciar sesion? READ MORE

answered May 2, 2020 in Java by oisoucknfn
1,215 views
0 votes
1 answer

What is Rotate credentials policy in AWS?

Rotate Credential Policy allows IAM users to ...READ MORE

answered Apr 10, 2019 in AWS by Abhi
377 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