IE10 CSS黑客動畫屬性？

Question

是否有可能爲CSS animation屬性創建IE10 hack？

我用的是這樣的：

height: 70px\9; 

然而，這並不爲animation工作。下面將停止動畫的所有瀏覽器中工作：

animation: none\9; 

我想這樣做，在我現有的樣式表，無需使用JavaScript或有條件的樣式表。

Answer 1

這一定是最奇特的邊緣情況在CSS我見過的一個。我不得不說，找到你的帽子 - 好吧，絆倒 - 這個。

爲什麼爲animation屬性\9劈失敗的原因是因爲，不象大多數其它特性，即在結束\9的標識符實際上是animation-name有效值，它接受的識別符。在這種情況下，\9代表hexadecimal escape sequence;什麼瀏覽器最終做的是接受聲明，並尋找一個名爲none\9，或者更準確地說，由字的標識符@keyframes規則「沒有」，隨後直接U + 0009字符製表，更好地爲製表符"\t"，通常被認爲是CSS中的空白。 對原始動畫的引用丟失，因此元素不再動畫。

---

_{這在技術上是隻要使用\9黑客會發生什麼;黑客利用這樣的事實，即這通常會導致除IE以外的瀏覽器出現分析錯誤。事實證明，animation-name並非如此。}

---

如何解決您僅停止在IE10動畫的問題是有點棘手。您可以使用\9破解，但與另一個屬性 - animation-play-state，而且這需要你想你的元素看起來相同，並具有相同的樣式，在IE10動畫的起點，因爲這是什麼有效的作用是凍結它在動畫的起點：

.element { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
    animation: myanim 1s infinite alternate; 
 

 
    /* Pause the animation at 0% in IE10 */ 
 
    animation-play-state: paused\9; 
 
} 
 

 
@keyframes myanim { 
 
    0% { background-color: yellow; } 
 
    100% { background-color: red; } 
 
}

<div class=element></div>

不幸的是我沒有一臺計算機上運行IE10來測試這一點，因此，如果您發現該動畫被暫停在IE11以及你會需要用下面的選擇器hac添加另一個CSS規則從Jeff Clayton K：

.element { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
    animation: myanim 1s infinite alternate; 
 

 
    /* Pause the animation at 0% in IE10 */ 
 
    animation-play-state: paused\9; 
 
} 
 

 
_:-ms-fullscreen, :root .element { 
 
    /* Allow the animation to run in IE11 */ 
 
    animation-play-state: running; 
 
} 
 

 
@keyframes myanim { 
 
    0% { background-color: yellow; } 
 
    100% { background-color: red; } 
 
}

<div class=element></div>

如果你不想使用\9黑客可以取代

animation-play-state: paused\9; 

與

-ms-animation-play-state: paused; 

但你會肯定需要t他IE11破解。無論哪種方式，這仍然依賴於您的靜態CSS規則具有相同的樣式作爲起點。