CSS3 Animation for IE9

Question

Currently working on my custom jquery plugin, which only requires jquery to run.

I don't want to have to include additional 3rd party jquery plugins.

I have a CSS3 animation running on my search button when clicked which works fine except for ie9. CSS is as follows :

.loader {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fff;
    outline:none;
    -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    font-size:0;
    line-height:0
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

However it does not work in IE9, is a pure css solution I can do in IE9 to get this working ?

Answer 1

Animation, transition and transformations are not supported in IE9 or lower. There is a support for them from IE 10+, but even in this case there are a lot of issues users find when working with IE. The best thing to do, is to work with javascript. With javascript you can avoid the CSS3 animations and run your results much better even in IE.

For looking at browser compatibility for animations, transitions and transformations look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility