加载程序在 IE 11 中波动答案

【问题标题】：Loader is fluctuating in IE 11加载程序在 IE 11 中波动
【发布时间】：2018-06-02 23:09:24
【问题描述】：

我使用 css 创建了一个简单的加载程序。在其他浏览器中运行良好，但在 IE 11 / Edge 中波动。

这里我在 html 中有一个加载器 div：

<div class="loader"> </div>

这是我的加载器CSS：

body{
  background:black;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari 4+ */
    -moz-animation: spin 2s linear infinite; /* Fx 5+ */
    -o-animation: spin 2s linear infinite; /* Opera 12+ */
    animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

这里是小提琴：

Fiddle

【问题讨论】：

为IE浏览器添加-ms-前缀......
我试过不工作仍然波动。
您应该删除所有使用供应商前缀的行，正如您从 cmets 中看到的那样，Safari、Firefox 或 Opera 多年来不需要这些行。
问题是加载器在旋转，但在 IE 中它不像其他浏览器那样流畅。它在 IE 中波动。 @Rob
我的评论是在暗示您，您正在使用过时、过时、无用的标记，没有浏览器使用，而且您毫无意义地插入。不客气。

标签： css html internet-explorer css-animations microsoft-edge

【解决方案1】：

试试这个

body{
  background:black;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari 4+ */
  -moz-animation: spin 2s linear infinite; /* Fx 5+ */
  -o-animation: spin 2s linear infinite; /* Opera 12+ */
  -ms-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;

}
@keyframes spin{
    0% {transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@-webkit-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@-moz-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100% {transform:rotateZ(360deg);}
}
@-ms-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100% {transform:rotateZ(360deg);}
}
@-o-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100% {transform:rotateZ(360deg);}
}

查看fiddle

【讨论】：

这是做什么的？它如何回答这个问题？不要只是脱口而出代码。解释你自己！ stackoverflow.com/help/how-to-answer
感谢您提供此代码 sn-p，它可能会提供一些有限的短期帮助。一个正确的解释would greatly improve 它的长期价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。
对不起，但我没有对此答案的解释。不久前我遇到了类似的问题，这是一段对我有用的代码。我讨厌 IE，所以我什至没有费心去弄清楚。