IE10 CSS 动画破解属性？

Question

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

我正在使用这个：

height: 70px;

然而，这不适用于 animation。以下将停止为所有浏览器工作的动画：

animation: none;

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

Answer 1

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

</code> 对 <code>animation 属性的破解失败的原因是，与大多数其他属性不同，以 </code> 结尾的标识符实际上是一个<a href="http://www.w3.org/TR/css3-animations/#animation-name-property" rel="nofollow noreferrer"><code>animation-name, which accepts an identifier. In this case, the </code> represents a <a href="http://www.w3.org/TR/CSS21/syndata.html#characters" rel="nofollow noreferrer">hexadecimal escape sequence</a> 的有效值；浏览器最终做的是接受声明并寻找名为 <code>none 的 @keyframes 规则，或者更准确地说，由单词 "none" 直接后跟 U+0009 CHARACTER TABULATION 组成的标识符，更广为人知的制表符 "\t"，通常被视为 CSS.¹ 中的空格对原始动画的引用丢失，因此该元素不再具有动画效果。

¹ _{从技术上讲，只要使用 </code> hack，就会发生这种情况；该黑客利用了这样一个事实，即这通常会导致 IE 以外的浏览器出现解析错误。事实证明，<code>animation-name 并非如此。}

如何解决仅在 IE10 上停止动画的问题有点棘手。您可以使用 </code> hack，但使用另一个属性 — <code>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;
}

@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;
}

_:-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>

如果您不想使用 </code> hack，您可以替换 </p> <pre><code>animation-play-state: paused;

与

-ms-animation-play-state: paused;

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

IE10 CSS 动画破解属性？

IE10 CSS hack for animation property?

css

css-animations

internet-explorer-10

css-hack

IE10 CSS 动画破解 属性？

IE10 CSS hack for animation property?

css

css-animations

internet-explorer-10

css-hack

IE10 CSS 动画破解属性？