Шаткая анимация CSS с граничным радиусом в Internet Explorer

В 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, но, учитывая, насколько похожи имена, я подумал, что одно и то же сообщество / компания могут управлять обоими веб-сайтами. Должен ли я просто удалить другие префиксы?

Ответы на вопрос(2)

Ваш ответ на вопрос