Spin in Reverse Direction #688

Open
agrobbin opened this Issue Jan 17, 2013 · 31 comments

Comments

Projects
None yet
@agrobbin

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.

@MrFent

This comment has been minimized.

Show comment Hide comment
@MrFent

MrFent Jan 27, 2014

+1

MrFent commented Jan 27, 2014

+1

@langdonx

This comment has been minimized.

Show comment Hide comment
@langdonx

langdonx Mar 26, 2014

+1, this seems totally obvious, but maybe because I've dropped support for IE9 now than 10+11 are out.

+1, this seems totally obvious, but maybe because I've dropped support for IE9 now than 10+11 are out.

@leonkunert

This comment has been minimized.

Show comment Hide comment
@leonkunert

leonkunert Jun 18, 2014

+1

+1

@dilip-vishwa

This comment has been minimized.

Show comment Hide comment
@dilip-vishwa

dilip-vishwa Jun 18, 2014

+1

+1

@dberansky

This comment has been minimized.

Show comment Hide comment
@dberansky

dberansky Jun 25, 2014

+1

+1

@tjbenator

This comment has been minimized.

Show comment Hide comment
@tjbenator

tjbenator Sep 10, 2014

+1 👍

+1 👍

@designbyadrian

This comment has been minimized.

Show comment Hide comment
@designbyadrian

designbyadrian Sep 29, 2014

+1

@egeland

This comment has been minimized.

Show comment Hide comment
@egeland

egeland Oct 5, 2014

+1

egeland commented Oct 5, 2014

+1

This was referenced Oct 5, 2014

@tagliala tagliala added this to the 5.0.0 milestone Oct 5, 2014

@ksmykala

This comment has been minimized.

Show comment Hide comment
@ksmykala

ksmykala Oct 15, 2014

+1

+1

@grenade

This comment has been minimized.

Show comment Hide comment
@grenade

grenade Nov 18, 2014

+1

grenade commented Nov 18, 2014

+1

@stuartgibson

This comment has been minimized.

Show comment Hide comment
@stuartgibson

stuartgibson Nov 29, 2014

+1

+1

@ilyavf

This comment has been minimized.

Show comment Hide comment
@ilyavf

ilyavf Dec 1, 2014

+1

ilyavf commented Dec 1, 2014

+1

@MarcGodard

This comment has been minimized.

Show comment Hide comment
@MarcGodard

MarcGodard Dec 15, 2014

+1

+1

@tagliala

This comment has been minimized.

Show comment Hide comment
@tagliala

tagliala Jan 14, 2015

Member

do you know browser support of reverse?

I'm concerned it is not enough and we have to duplicate the whole animation

Member

tagliala commented Jan 14, 2015

do you know browser support of reverse?

I'm concerned it is not enough and we have to duplicate the whole animation

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Apr 1, 2015

+1

ghost commented Apr 1, 2015

+1

@shivenigma

This comment has been minimized.

Show comment Hide comment
@shivenigma

shivenigma May 12, 2015

+1

+1

@neozenith

This comment has been minimized.

Show comment Hide comment
@neozenith

neozenith Jun 3, 2015

👍

👍

@jamland

This comment has been minimized.

Show comment Hide comment
@jamland

jamland Jun 29, 2015

+1

jamland commented Jun 29, 2015

+1

@merterhk

This comment has been minimized.

Show comment Hide comment
@merterhk

merterhk Dec 12, 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>

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>
@smithandre

This comment has been minimized.

Show comment Hide comment
@smithandre

smithandre Dec 12, 2015

+1

+1

@CrandellWS

This comment has been minimized.

Show comment Hide comment
@CrandellWS

CrandellWS Jul 1, 2016

+1

+1

@minderov

This comment has been minimized.

Show comment Hide comment
@minderov

minderov Aug 26, 2016

+1

+1

@phlegx

This comment has been minimized.

Show comment Hide comment
@phlegx

phlegx Oct 4, 2016

+1

phlegx commented Oct 4, 2016

+1

@shefik

This comment has been minimized.

Show comment Hide comment
@shefik

shefik Nov 13, 2016

+1

shefik commented Nov 13, 2016

+1

@cooervo

This comment has been minimized.

Show comment Hide comment
@cooervo

cooervo Mar 21, 2017

+1

cooervo commented Mar 21, 2017

+1

@tomsommer

This comment has been minimized.

Show comment Hide comment
@tomsommer

tomsommer May 19, 2017

+1

+1

@blitzmann

This comment has been minimized.

Show comment Hide comment
@blitzmann

blitzmann Jul 13, 2017

+1

+1

@tavuntu

This comment has been minimized.

Show comment Hide comment
@tavuntu

tavuntu Aug 19, 2017

+1

tavuntu commented Aug 19, 2017

+1

@BlueCoder77

This comment has been minimized.

Show comment Hide comment
@BlueCoder77

BlueCoder77 Sep 7, 2017

+1

+1

@michaeldevenney

This comment has been minimized.

Show comment Hide comment
@michaeldevenney

michaeldevenney Sep 22, 2017

+1

abichat added a commit to abichat/abichat.github.io that referenced this issue Mar 5, 2018

creativeassetinventory added a commit to creativeassetinventory/creativeassetinventory.github.io that referenced this issue Apr 18, 2018

@colleen-smith-levelsbeyond

This comment has been minimized.

Show comment Hide comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment