title: Wobbly CSS Animation with Border-Radius in Internet Explorer
body: <p>In Internet Explorer this animation appears to wobble. I was reading the answer to <a href="https://stackoverflow.com/questions/23566831/internet-explorer-11-wobbly-css3-animation">this question</a> and they made it sound as though it is possible to fix.</p>
  
  <p>I cannot really use an image as the border radius is not constant, and I would prefer not to use an animated gif. </p>
  
  <p>I understand 'wobble' is not a very good description but I can't think of any other words to describe it. I have not tested it with Opera/Safari, so if you have either of them I would like to know if they display correctly or also have the problem. Please run the following Snippet in Chrome/Firefox and compare it to the Snippet in Internet Explorer: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes spin{
   0% {transform:rotateZ(0deg);}
   50% {transform:rotateZ(360deg);border-radius:60%;}
   100%{transform:rotateZ(720deg);}
  }
  @-webkit-keyframes spin{
   0% {transform:rotateZ(0deg);}
   50% {transform:rotateZ(360deg);border-radius:60%;}
   100%{transform:rotateZ(720deg);}
  }
  @-moz-keyframes spin{
   0% {transform:rotateZ(0deg);}
   50% {transform:rotateZ(360deg);border-radius:60%;}
   100%{transform:rotateZ(720deg);}
  }
  @-ms-keyframes spin{
   0% {transform:rotateZ(0deg);}
   50% {transform:rotateZ(360deg);border-radius:60%;}
   100%{transform:rotateZ(720deg);}
  }
  @-o-keyframes spin{
   0% {transform:rotateZ(0deg);}
   50% {transform:rotateZ(360deg);border-radius:60%;}
   100%{transform:rotateZ(720deg);}
  }
  #spinme{
   display:inline-block;
   position:relative;
   left:0;
   top:0;
   margin:0.2rem;
   width:0.8rem;
   height:0.8rem;
   border:0.2rem solid black;
   border-radius:0;
   outline: 1px solid transparent; /* require to remove jagged edges in firefox */
   transform:rotateZ(0deg);
   animation: spin infinite 4s;
   -webkit-animation: spin infinite 4s;
   -moz-animation: spin infinite 4s;
   -ms-animation: spin infinite 4s;
   -o-animation: spin infinite 4s;
  }
  #spinme:nth-child(2){animation-delay:0.06s}
  #spinme:nth-child(3){animation-delay:0.12s}
  #spinme:nth-child(4){animation-delay:0.18s}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="spinme"&gt;&lt;/div&gt;
  &lt;div id="spinme"&gt;&lt;/div&gt;
  &lt;div id="spinme"&gt;&lt;/div&gt;
  &lt;div id="spinme"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>outline</code> hack to fix the sharp edge came from <a href="https://stackoverflow.com/a/9333891/4907552">this answer</a>.</p>
  
  <hr>
  
  <p>As a side question, and out of curiosity, which of those prefixes are actually required? I was looking at the <a href="http://caniuse.com/#feat=css-animation" rel="nofollow noreferrer">compatibility requirements </a> to get it working in older browsers, but it only ever mentions the <code>-webkit</code> prefix: none of the <code>-moz</code>,<code>-ms</code> or <code>-o</code> prefixes seem to be needed for any browser version. </p>
  
  <p>I have also just checked <a href="http://shouldiprefix.com/#animations" rel="nofollow noreferrer">shouldiprefix</a> and they seem to agree with caniuse, but given how similar the names are I thought that the same community/company may run both websites. Should I just remove the other prefixes?</p>