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