在Internet Explorer中擺動半徑CSS動畫

Question

在Internet Explorer中，此動畫似乎搖擺不定。我正在閱讀this question的答案，他們發出的聲音好像可以修復。

由於邊界半徑不是恆定的，我不能真正使用圖像，我不想使用動畫gif。

我明白'搖擺'不是一個很好的描述，但我想不出任何其他詞來形容它。我沒有用Opera/Safari對它進行測試，所以如果你有任何一個，我想知道它們是否正確顯示或者是否有問題。請在Chrome/Firefox中運行下面的代碼片段，並將其與該片段在Internet Explorer中：

@keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-webkit-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-moz-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-ms-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-o-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
#spinme{ 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t left:0; 
 
\t top:0; 
 
\t margin:0.2rem; 
 
\t width:0.8rem; 
 
\t height:0.8rem; 
 
\t border:0.2rem solid black; 
 
\t border-radius:0; 
 
\t outline: 1px solid transparent; /* require to remove jagged edges in firefox */ 
 
\t transform:rotateZ(0deg); 
 
\t animation: spin infinite 4s; 
 
\t -webkit-animation: spin infinite 4s; 
 
\t -moz-animation: spin infinite 4s; 
 
\t -ms-animation: spin infinite 4s; 
 
\t -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黑客修復銳利邊緣從this answer來了。

---

作爲一個側面問題，出於好奇，哪些前綴實際上是需要的？我在查看compatibility requirements以使其在舊版瀏覽器中正常工作，但它只提到-webkit前綴：對於任何瀏覽器版本，似乎都不需要-moz,-ms或-o前綴。

我也剛剛檢查過shouldiprefix，他們似乎同意caniuse，但給出了多麼相似的名字，我認爲同一社區/公司可能運行這兩個網站。我應該刪除其他前綴嗎？

Answer 1

它看起來像是透明的輪廓與物體的邊緣發生干涉。輪廓總是一個正方形（例如，您可以通過使用outline: 1px solid blue;進行查看）。我只能假設在內插的圓形上使用1px透明輪廓輪廓會導致呈現問題。

與outline:1px solid rgba(255, 255, 255, 0);或outline:0 solid transparent;修復Edge和IE11爲我更換outline:1px solid transparent;。我沒有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和邊緣都支持前綴少animation: spin infinite 4s;但IE11還支持-ms-animation。 Edge不支持-ms-animation，但確實支持-webkit-animation - 請參閱Will Microsoft Edge use prefixes like -webkit- or -ms-?。因此，根據目標瀏覽器受衆的不同，如果您願意，您可以選擇不使用已棄用的屬性，但我現在將它們全部留下，以免舊版瀏覽器被排除。

注：我沒有看到，在邊緣檢查切換CSS屬性顯示的計算border-[top|bottom]-[left|right]-radius性質有時一個百分比，有時硬px值。雖然我不確定這與問題有關或相關。

Answer 2

要修復旋轉的東西導致擺動的IE Internet Explorer錯誤，請嘗試此操作。在所有維度（x，y和z）中，變換原點應設置爲寬度的一半。

如果你的元素是40像素寬，高，這樣設置屬性：

transform-origin: 20px 20px 20px;