Internet Explorer 11摆动CSS3动画 [英] Internet Explorer 11 wobbly CSS3 animation

问题描述

请参阅此小提琴： 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中，由于旋转的原因，有一个明显的摆动。

In Google Chrome the rotation is stable, however for some reason in IE11 there is a noticable "wobble" of the circle as it rotates.

有人知道为什么会这样摇摆吗？

Any ideas why it wobbles so? Is there any way to fix it in IE11?

推荐答案

对于它的价值，它也存在于其他浏览器中。它必须做，如何绘制边框，这不是一个完美的回合。据我所知，还没有解决的办法。但是，您可以将边框绘制为背景图像。

For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.

.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/

这篇关于Internet Explorer 11摆动CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！