在Internet Explorer中使用Border-Radius的摇摆CSS动画

Question

在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>

outline修复锋利边缘的黑客来自这个答案.

---

作为一个附带问题,出于好奇,实际上需要哪些前缀？我一直在寻找的兼容性要求得到它在旧的浏览器工作,但它只能提起这个-webkit前缀:没有的-moz,-ms或者-o前缀似乎需要任何浏览器版本.

我刚刚检查了shouldiprefix,他们似乎同意caniuse,但考虑到名字有多相似,我认为同一个社区/公司可能同时运行这两个网站.我应该删除其他前缀吗？

Answer 1

看起来它是透明的轮廓干扰物体的边缘.轮廓始终是正方形(例如,您可以通过使用看到outline: 1px solid blue;).我只能假设在插值圆形形状上使用1px透明轮廓轮廓会导致渲染问题.

outline:1px solid transparent;用我的替换outline:1px solid rgba(255, 255, 255, 0); 或 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.Edge不支持-ms-animation但支持-webkit-animation- 请参阅Microsoft Edge将使用像-webkit-或-ms-这样的前缀吗？.因此,根据您的目标浏览器受众,您可以选择在您希望的情况下省略已弃用的属性,但我暂时将其全部保留,以便不排除旧浏览器.

注意:我确实看到在Edge检查器中切换CSS属性显示计算的border-[top|bottom]-[left|right]-radius属性有时是百分比,有时是硬px值.我不确定这与问题有关或相关.