title: CSS3 Animation for IE9
body: <p>Currently working on my custom jquery plugin, which only requires jquery to run.</p>
  
  <p>I don't want to have to include additional 3rd party jquery plugins.</p>
  
  <p>I have a CSS3 animation running on my search button when clicked which works fine except for ie9. CSS is as follows :</p>
  
  <pre><code>.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 */
      }
  }
  </code></pre>
  
  <p>However it does not work in IE9, is a pure css solution I can do in IE9 to get this working ?</p>