Question

我创建了一个按预期工作的CSS3动画，但在Internet Explorer上旋转非常紧张。

我正在创建一个微调器加载指示器，因此我使用CSS动画来执行transform: rotate(...);。在Chrome和其他浏览器上，轮播非常流畅，但在Internet Explorer上它显得略微不稳定。

我尝试设置transform-origin: center，尝试使用直接像素值代替em单位和其他各种内容，但似乎没有任何效果。

有关如何改进此动画的任何想法？

如果我制作象限旋转完全透明的“轨道”（border-color），它会使效果不那么明显，但我想如果有人有任何想法我会问。

.loading {
  display: inline-block;
  font-size: 20px;
  height: 1em;
  width: 1em;
  margin: 0 auto;
  position: relative;
  -webkit-animation: loading 1s infinite linear;
  -moz-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;
  border-left: 0.25em solid rgba(0, 0, 0, .3);
  border-right: 0.25em solid rgba(0, 0, 0, .3);
  border-bottom: 0.25em solid rgba(0, 0, 0, .3);
  border-top: 0.25em solid rgba(0, 0, 0, .8);
  border-radius: 100%;
  vertical-align: middle;
  margin: 0 0.5em;
}

.loading * { display: none; }
@keyframes loading { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@-moz-keyframes loading { from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } }
@-webkit-keyframes loading { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }

<div class="loading"></div>

Answer 1

因此，我最终使用256x256透明PNG来复制效果，而不使用CSS边框，因为IE无法使用border-radius渲染完美的圆圈。

.loading {
  display: inline-block;
  font-size: 20px;
  height: 1em;
  width: 1em;
  margin: 0 auto;
  position: relative;
  -webkit-animation: loading 1s infinite linear;
  -moz-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;

  /*
  **border-left: 0.25em solid rgba(0, 0, 0, .3);
  **border-right: 0.25em solid rgba(0, 0, 0, .3);
  **border-bottom: 0.25em solid rgba(0, 0, 0, .3);
  **border-top: 0.25em solid rgba(0, 0, 0, .8);
  */
  background-image: url(../images/loading.png);
  background-size: 100% 100%;

  border-radius: 100%;
  vertical-align: middle;
  margin: 0 0.5em;
}

IE中的CSS旋转是“紧张”

1 个答案: