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
30 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
448 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
185 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
• 16,050 points
261 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
• 7,860 points
14 views
0 votes
1 answer

Switching H1 text with a logo image

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

answered Feb 27 in Others by narikkadan
• 7,860 points
109 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,349 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,060 points
176 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
877 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
319 views
0 votes
1 answer

Animation - career

Job in animation is quite free as ...READ MORE

answered May 2, 2019 in Career Counselling by Cherukuri
• 33,010 points
150 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