css - 加载程序在 IE 11 中波动

Question

我使用 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 :

Fiddle

Answer 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 上查看