IE10 CSS hack 动画属性？

Question

是否可以为 CSS animation 属性创建 IE10 hack？

我正在使用这个：

height: 70px\9;

但这不适用于animation。以下将停止所有浏览器的动画效果：

animation: none\9;

我想在我现有的样式表中执行此操作，而不使用 JavaScript 或条件样式表。

Answer 1

这一定是我见过的 CSS 中最奇特的边缘情况之一。我不得不说，感谢你发现——好吧，偶然发现——这个。

\9 hack 对animation 属性失败的原因是，与大多数其他属性不同，以\9 结尾的标识符实际上是animation-name 的有效值，它接受标识符。在这种情况下，\9 代表hexadecimal escape sequence；浏览器最终会接受声明并寻找一个名为 none\9 的 @keyframes 规则，或者更准确地说，是一个由单词“none”组成的标识符，后跟 U+0009 CHARACTER TABULATION，更广为人知的是制表符"\t"，通常在 CSS 中被视为空白。¹对原始动画的引用丢失，因此元素不再动画。

---

¹_{从技术上讲，每当使用\9 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 规则，使用来自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>

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

animation-play-state: paused\9;

与

-ms-animation-play-state: paused;

但您肯定需要 IE11 hack。无论哪种方式，这仍然依赖于与起点具有相同样式的静态 CSS 规则。