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>
<div id="container">
    <a id="update" href="#">
        <i class="icon-refresh"></i>
    </a>
</div>

CSS

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

#container {
    display: table;
    width: 300px;
    height: 400px;
}

#update {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

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