easy rotation effects with nice semantic classes
simplespin.css is a simple library which enables you to call CSS rotation effects quickly and easily by adding semantic classes to your HTML. It's cross browser compatible too!
Infinite spinning!
<div class="spin-1s"></div><div class="spin-5s"></div>Change direction!
<div class="spin-3s spin-rev"></div>Change the timing function!
<div class="spin-05s spin-ease"></div>Works great with jQuery - Hover and see!
<div></div>$("div").hover(function() {
$(this).toggleClass("spin-1s spin-once spin-ease");
});
Try it on your social icons!
<i class="fa fa-github"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-dribble"></i>$("i").hover(function() {
$(this).toggleClass("spin-05s spin-once");
});
Download and add simplespin.css to the <head> of your HTML document.
<link rel="stylesheet" href="simplespin.css">Add "spin-___" classes to the elements you want to spin.
<span class="spin-1s"></span>That's it!
Here's a breakdown of the classes you can use:
.spin-02s
Linear, infinite rotation – 0.2 seconds per spin
.spin-05s
Linear, infinite rotation – 0.5 seconds per spin
.spin-1s
Linear, infinite rotation – 1 second per spin
.spin-2s
Linear, infinite rotation – 2 seconds per spin
.spin-3s
Linear, infinite rotation – 3 seconds per spin
...
.spin-10s
Linear, infinite rotation – 10 seconds per spin
The following must be used in conjunction with one of the above classes
.spin-rev
Anti-clockwise rotation
.spin-ease
Non-linear, 'slow-fast-slow' animation
.spin-easein
Non-linear, 'slow-fast' animation
.spin-easeout
Non-linear, 'fast-slow' animation
.spin-once
Spins once only
.spin-twice
Spins two times only
.spin-thrice
Spins three times only