在 Internet Explorer 中，此动画似乎在摆动。我正在阅读答案这个问题他们听起来好像可以解决这个问题。
我不能真正使用图像，因为边界半径不是恒定的，而且我不想使用动画 gif。
我知道“摆动”不是一个很好的描述，但我想不出任何其他词来描述它。我还没有用 Opera/Safari 测试过它，所以如果你有它们中的任何一个，我想知道它们是否显示正确或也有问题。请在 Chrome/Firefox 中运行以下代码片段，并将其与 Internet Explorer 中的代码片段进行比较：
@keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-webkit-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-moz-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-ms-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-o-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
#spinme{
display:inline-block;
position:relative;
left:0;
top:0;
margin:0.2rem;
width:0.8rem;
height:0.8rem;
border:0.2rem solid black;
border-radius:0;
outline: 1px solid transparent; /* require to remove jagged edges in firefox */
transform:rotateZ(0deg);
animation: spin infinite 4s;
-webkit-animation: spin infinite 4s;
-moz-animation: spin infinite 4s;
-ms-animation: spin infinite 4s;
-o-animation: spin infinite 4s;
}
#spinme:nth-child(2){animation-delay:0.06s}
#spinme:nth-child(3){animation-delay:0.12s}
#spinme:nth-child(4){animation-delay:0.18s}
<div id="spinme"></div>
<div id="spinme"></div>
<div id="spinme"></div>
<div id="spinme"></div>
The outline黑客修复锋利的边缘来自这个答案.
作为一个附带问题，出于好奇，实际上需要哪些前缀？我正在看兼容性要求让它在旧版浏览器中工作，但它只提到了-webkit前缀：没有一个-moz,-ms or -o任何浏览器版本似乎都需要前缀。
我也刚刚检查过应该前缀他们似乎同意 caniuse，但鉴于名称非常相似，我认为同一个社区/公司可能运行这两个网站。我应该删除其他前缀吗？
看起来像是透明轮廓干扰了物体的边缘。轮廓始终是正方形（正如您可以通过使用看到的outline: 1px solid blue;例如）。我只能假设在插值圆形上使用 1px 透明轮廓会导致渲染问题。
更换outline:1px solid transparent; with outline:1px solid rgba(255, 255, 255, 0); or outline:0 solid transparent;为我修复了 Edge 和 IE11。我没有 Firefox，所以我无法测试这是否也消除了锯齿状边缘。
@keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-webkit-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-moz-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-ms-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
@-o-keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
#spinme{
display:inline-block;
margin:0.2rem;
width:0.8rem;
height:0.8rem;
border:0.2rem solid black;
border-radius:0;
outline:0 solid transparent;
transform:rotateZ(0deg);
animation: spin infinite 4s;
-webkit-animation: spin infinite 4s;
-moz-animation: spin infinite 4s;
-ms-animation: spin infinite 4s;
-o-animation: spin infinite 4s;
}
<div id="spinme"></div>
至于供应商前缀部分，当我在本地测试时，我发现IE11和Edge都支持无前缀animation: spin infinite 4s;但IE11仍然支持-ms-animation。边缘不支持-ms-animation但确实支持-webkit-animation - see Microsoft Edge 会使用 -webkit- 或 -ms- 等前缀吗？。因此，根据您的目标浏览器受众，如果您愿意，您可以选择忽略已弃用的属性，尽管我现在会保留所有这些属性，以便不排除较旧的浏览器。
Note:我确实看到在 Edge 检查器中切换 CSS 属性显示了计算的结果border-[top|bottom]-[left|right]-radius属性有时是百分比，有时是硬性的px价值。但我不确定这是否与问题相关或相关。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
