Font-awesome: Spin in Reverse Direction
It'd be great if there was a class you could attach to an icon-* to have it spin in the reverse direction. It's easily doable by just adding the 'reverse' keyword to the animation, but it'd be great to have a class like icon-spin-reverse.
.icon-spin-reverse {
-moz-animation: spin 2s infinite linear reverse;
-o-animation: spin 2s infinite linear reverse;
-webkit-animation: spin 2s infinite linear reverse;
animation: spin 2s infinite linear reverse;
}
Or a chainable class:
.icon-spin.icon-spin-reverse {
-moz-animation-direction: reverse;
-o-animation-direction: reverse;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
reverse was added to the CSS3 spec relatively recently, and only Firefox 16+ and Chrome 19+ support it. Alternatively, it could be done by just inverting the spin keyframes for a spin-reverse class.
agrobbin
All 32 comments
+1
MrFent
on 27 Jan 2014
+1, this seems totally obvious, but maybe because I've dropped support for IE9 now than 10+11 are out.
langdonx
on 26 Mar 2014
+1
leonkunert
on 18 Jun 2014
+1
dilip-vishwa
on 18 Jun 2014
+1
dberansky
on 25 Jun 2014
+1 :+1:
tjbenator
on 11 Sep 2014
+1
designbyadrian
on 29 Sep 2014
+1
egeland
on 5 Oct 2014
+1
ksmykala
on 15 Oct 2014
+1
grenade
on 18 Nov 2014
+1
stuartgibson
on 29 Nov 2014
+1
ilyavf
on 1 Dec 2014
+1
MarcGodard
on 15 Dec 2014
do you know browser support of reverse?
I'm concerned it is not enough and we have to duplicate the whole animation
tagliala
on 14 Jan 2015
+1
ghost
on 1 Apr 2015
+1
shivenigma
on 12 May 2015
:+1:
neozenith
on 3 Jun 2015
+1
jamland
on 29 Jun 2015
Here is another code. Based on fa-spin class. Just add to your css file.
.fa-spin-reverse {
-webkit-animation: fa-spin-reverse 2s infinite linear;
animation: fa-spin-reverse 2s infinite linear;
}
@-webkit-keyframes fa-spin-reverse {
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin-reverse {
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
to use:
<i class="fa fa-spin-reverse fa-cog"></i>
merterhk
on 12 Dec 2015
+1
smithandre
on 13 Dec 2015
+1
CrandellWS
on 1 Jul 2016
+1
minderov
on 27 Aug 2016
+1
phlegx
on 4 Oct 2016
+1
shefik
on 13 Nov 2016
+1
cooervo
on 21 Mar 2017
+1
tomsommer
on 19 May 2017
+1
blitzmann
on 13 Jul 2017
+1
tavuntu
on 19 Aug 2017
+1
BlueCoder77
on 7 Sep 2017
+1
michaeldevenney
on 22 Sep 2017
+1
my-name-means-girl
on 2 May 2018
+1
pkmccaffrey
on 12 Jun 2018
Related issues
daneren2005
路
3Comments
petermolnar
路
3Comments
tdolph
路
3Comments
ojvribeiro
路
3Comments
jakuuub
路
3Comments
Most helpful comment
Here is another code. Based on fa-spin class. Just add to your css file.
to use: