css - Internet Explorer 11 不稳定的 CSS3 动画

Question

请引用这个 fiddle :http://jsfiddle.net/eQegA/3/

<div class="spinner"></div>

.spinner {
    width: 100px;
    height: 100px;
    border: 50px solid blue;
    /*border-top-color: #fff;
    border-bottom-color: #fff;*/ /* commented out to see the wobble better */
    border-radius: 200px;    

    -webkit-animation: application-loading-rotate 1s;
    animation: application-loading-rotate 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes application-loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes application-loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在 Google Chrome 中，旋转是稳定的，但是由于某种原因，在 IE11 中，圆在旋转时有明显的“摆动”。

知道为什么它会如此摇晃吗？有什么方法可以在 IE11 中修复它吗？

Answer 1

就其值(value)而言，它也发生在其他浏览器上。它必须做，边界是如何绘制的，它不是一个完美的圆形。据我所知，没有快速解决这个问题的方法。但是，您可以将边框绘制为背景图像。

.spinner {
display:block;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
    background-size:100%;

    -webkit-animation: application-loading-rotate 1s;
    animation: application-loading-rotate 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes application-loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes application-loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

参见: http://jsfiddle.net/eQegA/26/