Animating Glyphicon on click


I am trying to animate a glyphicon-refresh icon so that when I click on the icon it should rotate. I am trying to do this using CSS3, but it is not working properly.

Here is my markup:

<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>

Here is my css:


.glyphicon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

@keyframes "rotateThis" {
 from { transform: scale( 1 ) rotate( 0deg );   }
 to   { transform: scale( 1 ) rotate( 360deg ); }


Here is my JS:

<script type="text/javascript">
    $( document ).ready( function() {
        $( "#update" ).on( "click", function( e ) {
            var $icon = $( this ).find( ".glyphicon glyphicon-refresh" ),
            animateClass = "glyphicon-refresh-animate";

            $icon.addClass( animateClass );
            // setTimeout is to indicate some async operation
            window.setTimeout( function() {
                $icon.removeClass( animateClass );
            }, 2000 );

Any help, or an alternative approach, would be appreciated.

Problem courtesy of: Raghavendra


First: Your jQuery selector is wrong:

.glyphicon glyphicon-refresh

has to be


Second: You should prefix all animate properties, the keyframes keyword and the transform property with vendor prefixes. (Only Firefox and IE10+ support without prefix. For example for Safari and Chrome:

.glyphicon-refresh-animate {
   -webkit-animation-name: rotateThis;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;

@-webkit-keyframes "rotateThis" {
 from { 
        -webkit-transform: rotate( 0deg );  
 to  { 
        -webkit-transform: rotate( 360deg ); 
} This fiddle only works in Safari and Chrome!

Solution courtesy of: idmean


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.