3

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

我正在使用这个：

height: 70px\9;

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

animation: none\9;

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

4

1 回答 1

3

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

\9黑客攻击该属性失败的原因animation是，与大多数其他属性不同，以 结尾的标识符\9实际上是 的有效值animation-name，它接受一个标识符。在这种情况下，\9表示十六进制转义序列；浏览器最终做的是接受声明并寻找一个@keyframes名为 的规则none\9，或者更准确地说，一个由单词“none”组成的标识符，后跟 U+0009 CHARACTER TABULATION，更好地称为制表符"\t"，通常被认为是 CSS 中的空白. 1对原始动画的引用丢失，因此元素不再动画。

1从技术上讲，每当使用 hack时都会发生这种情况；\9黑客利用了这样一个事实，即这通常会导致 IE 以外的浏览器出现解析错误。animation-name事实证明并非如此。

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

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

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

于 2015-08-14T18:58:48.550 回答