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, 2022 in Others by Soham
• 9,710 points
824 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, 2022 by Aditya
• 7,680 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,190 points
1,515 views
0 votes
0 answers

CSS3 Rotate Animation

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

Jun 22, 2022 in CSS by Edureka
• 13,620 points
585 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,853 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,710 points
1,843 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,935 views
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,322 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,869 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
647 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
2,106 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
876 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