Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tip: Animating Twitter BootStrap Icons
.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 ); }
}
.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 );
}
}
<a id="update" href="#"><i class="icon-refresh"></i></a>
$( 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 );
});
});
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.