Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Spin in Reverse Direction #688

agrobbin opened this Issue · 18 comments

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.




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



This was referenced
@tagliala tagliala added this to the 5.0.0 milestone





do you know browser support of reverse?

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





Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.