Tip: Animating Twitter BootStrap Icons

fiddle-standard.css

.icon-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 ); }
}

fiddle.css

.icon-refresh-animate {
  -webkit-animation-name: rotateThis;
  -moz-animation-name: rotateThis;
  -ms-animation-name: rotateThis;
  -o-animation-name: rotateThis;
  animation-name: rotateThis;
   
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes "rotateThis" {
  from {
    -webkit-transform: scale( 1 ) rotate( 0deg );
   	-moz-transform: scale( 1 ) rotate( 0deg );
   	-o-transform: scale( 1 ) rotate( 0deg );
   	-ms-transform: scale( 1 ) rotate( 0deg );
   	transform: scale( 1 ) rotate( 0deg );
  }
  to {
    -webkit-transform: scale( 1 ) rotate( 360deg );
   	-moz-transform: scale( 1 ) rotate( 360deg );
   	-o-transform: scale( 1 ) rotate( 360deg );
   	-ms-transform: scale( 1 ) rotate( 360deg );
   	transform: scale( 1 ) rotate( 360deg );
  }
}

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

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

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

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

fiddle.html

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

fiddle.js

$( document ).ready( function() {
  $( "#update" ).on( "click", function( e ) {
        var $icon = $( this ).find( ".icon-refresh" ),
          animateClass = "icon-refresh-animate";

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

fiddle.manifest

name: Animating Twitter BootStrap Icons
description: This uses CSS animation keyframes to animate an icon
authors:
  - Elijah Manor
resources:
  - //netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js
  - //netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css
  - //cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
normalize_css: no