fa-spin-reverse

[KSCooke]

I attempted to use fa-history and then add fa-spin to it. Seemed as if the icon would work but the spin was going in the wrong direction. So I just applied reverse to the fa-spin class animations and it seems to work correctly. The code is not without its problems as it does not seem to work in IE. Here is the code again separately from the file.

.fa-spin-reverse {
-webkit-animation: spin 2s infinite linear reverse;
-moz-animation: spin 2s infinite linear reverse;
-o-animation: spin 2s infinite linear reverse;
animation: spin 2s infinite linear reverse;
}

[radubr]

+1

[vortex9]

+1

[victorperin]

+1

[jbthoma]

+1

[matthew-hull]

+1

[kelvintaywl]

+1

[robertotremonti]

+1

Here's the code that should work in all browsers, including IE.

.@{fa-css-prefix}-spin-reverse {
    -webkit-animation: fa-spin-reverse 2s infinite linear;
            animation: fa-spin-reverse 2s infinite linear;
}

@-webkit-keyframes fa-spin-reverse {
    0% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(1deg);
                transform: rotate(1deg);
    }
}

@keyframes fa-spin-reverse {
    0% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(1deg);
                transform: rotate(1deg);
    }
}

[JaredCubilla]

+1

[tagliala]

dup of #688, please +1 that request

since this PR can't be merged, I need to close this one

@robertotremonti the problem with reverse should be mobile browsers, as per: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

http://jsfiddle.net/tagliala/em2ztqsz/3/
This fiddle works on IE11. Can't test IE10.
It works on iOS 8.0

Please keep discussing on the other thread on which approach we should use

[dammina]

+1