The following code shows how to rotate icon in animation.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type='text/javascript'
src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style type='text/css'>
.icon-refresh-animate {<!-- ww w . j av a2 s. c o m-->
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);}
}
</style>
<script type='text/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 );
});
});
</script>
</head>
<body style='margin:30px'>
<p>click icon to see the animation.</p>
<a id="update" href="#"><i class="icon-refresh"></i></a>
</body>
</html>