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规则具有相同的样式作为起点。