title: CSS3 rotate animation not working in chrome
body: <p>CSS3:</p>
  
  <pre><code>.icon-refresh-animate {
      -webkit-animation: rotate 15s linear infinite alternate;
      -moz-animation: rotate 15s linear infinite alternate;
      -ms-animation: rotate 15s linear infinite alternate;
      -o-animation: rotate 15s linear infinite alternate;
  }
  @-webkit-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
  }
  @keyframes "rotate" {
    from { transform: scale( 1 ) rotate( 0deg );   }
    to   { transform: scale( 1 ) rotate( 360deg ); }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;span class="btn btn-success active" data-restrict data-access="scouter recruiter admin" data-ng-if="!layout.syncProgress"&gt;
          &lt;i class="icon-refresh icon-refresh-animate" &gt; {{'REFRESHDATAPROGRESS' | translate}}&lt;/i&gt;
      &lt;/span&gt;
  </code></pre>
  
  <p>Just wouldn't do a thing.</p>
  
  <p>Any help is much appreciated.</p>