Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Spin in Reverse Direction #688

Open
agrobbin opened this Issue · 18 comments
@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

+1

@langdonx

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

@egeland

+1

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

+1

@ilyavf

+1

@tagliala
Collaborator

do you know browser support of reverse?

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

@gangaec

+1

@jamland

+1

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.