Problem: IE rotate animation acting unpredictable Solution: animate something else just for IE

gistfile1.css

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 1s linear infinite;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(360deg);
        -webkit-transform-origin: 50% 50%;
    }
    to{
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: 50% 50%;
    }
}

@-moz-keyframes rotating {
    from{-moz-transform: rotate(360deg);}
    to{-moz-transform: rotate(0deg);}
}

/* rotate works shitty in IE so instead animate opacity*/
@-ms-keyframes rotating {
    0%{opacity: 0.25;}
    50%{opacity: 1;}
    100%{opacity: 0.25;}
}