CSS3 animated rotation

CSS3 animated rotation

by Kheema Pandey

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div align="center">
            <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRTCKie7zNcXtCeCjnMsE8kyg7D9fC_-Hllk7VaNoXIGHPLxbWP" class="animation-rotate"/>
        </div>
    </body>
</html>

CSS

@keyframes rotate {
  0% { -ms-transform: rotate(0deg); }
  20% { -ms-transform: rotate(90deg); }
  25% { -ms-transform: rotate(90deg); }
  45% { -ms-transform: rotate(180deg); }
  50% { -ms-transform: rotate(180deg); }
  70% { -ms-transform: rotate(270deg); }
  75% { -ms-transform: rotate(270deg); }
  100% { -ms-transform: rotate(360deg); }
}

@-moz-keyframes rotate {
  0% { -moz-transform: rotate(0deg); }
  20% { -moz-transform: rotate(90deg); }
  25% { -moz-transform: rotate(90deg); }
  45% { -moz-transform: rotate(180deg); }
  50% { -moz-transform: rotate(180deg); }
  70% { -moz-transform: rotate(270deg); }
  75% { -moz-transform: rotate(270deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(90deg); }
  25% { -webkit-transform: rotate(90deg); }
  45% { -webkit-transform: rotate(180deg); }
  50% { -webkit-transform: rotate(180deg); }
  70% { -webkit-transform: rotate(270deg); }
  75% { -webkit-transform: rotate(270deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.animation-rotate {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
    
    /*for firefox*/
    -moz-animation-name: rotate; 
    -moz-animation-duration: 4.5s; 
    -moz-animation-iteration-count: infinite;
    -moz-transition-timing-function: linear;
    
    /*for IE*/
    -ms-animation-name: rotate; 
    -ms-animation-duration: 4.5s; 
    -ms-animation-iteration-count: infinite;
    -ms-transition-timing-function: linear;
    
    animation-name: rotate; 
    animation-duration: 4.5s; 
    animation-iteration-count: infinite;
    transition-timing-function: linear;
}