Animating Twitter BootStrap Icons

This uses CSS animation keyframes to animate an icon author(s): Elijah Manor

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a id="update" href="#"><i class="icon-refresh"></i></a>

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

JavaScript

$( 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 );
    });    
});