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
• 8,730 points
40 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,280 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
469 views
0 votes
0 answers

CSS3 Rotate Animation

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

2 days ago in CSS by Edureka
• 7,660 points
10 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
• 8,730 points
284 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
563 views
0 votes
1 answer

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

<h1> <a href="http://stackoverflow.com"> ...READ MORE

answered Feb 21 in Others by narikkadan
• 10,240 points
19 views
0 votes
0 answers

Looping Animation of text color change using CSS3

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

2 days ago in CSS by Edureka
• 7,660 points
5 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,364 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,080 points
189 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
928 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
332 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP