IE10 CSS动画属性hack？

Question

有没有可能针对CSS animation 属性创建IE10的hack？

我曾尝试使用以下代码：

height: 70px\9;

然而，这对于动画无效。以下内容将停止所有浏览器中的动画工作：

animation: none\9;

我希望在不使用JavaScript或条件样式表的情况下，使用我的现有样式表来完成这个操作。

- Evanss

Answer 1

这绝对是我见过的CSS中最奇怪的边缘情况之一。不得不说，你能找到 - 好吧，碰巧发现 - 这个问题真是太棒了。 \9 hack失败的原因在于，与大多数其他属性不同，以 \9 结尾的标识符实际上是 animation-name 的有效值，它接受一个标识符。在这种情况下，\9 表示一个 十六进制转义序列；浏览器最终接受声明并寻找一个名为 none\9 的 @keyframes 规则，或者更准确地说，由单词 "none" 直接跟随 U+0009 字符制表符（在 CSS 中通常被视为空格）组成的标识符。¹ 对原始动画的引用丢失了，所以元素不再动画。

---

这就是在使用\9 hack 时技术上发生的事情；该hack利用了这一事实，即在IE以外的浏览器上通常会导致解析错误。但对于animation-name来说并非如此。

---

如何解决在IE10上只停止动画的问题有点棘手。您可以使用\9 hack，但需要使用另一个属性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上动画也被暂停了，你需要添加另一个CSS规则，并使用以下选择器hack来自Jeff Clayton：

.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>

如果您不想使用\9hack，您可以替换

animation-play-state: paused\9;

使用

-ms-animation-play-state: paused;

但是你肯定需要使用IE11 hack。不管怎样，这仍然取决于您的静态CSS规则与起始点具有相同的样式。

- BoltClock