IE10 CSS hack for animation property?

问题

Is it possible to create an IE10 hack for the CSS animation property?

I was using this:

height: 70px\9;

However this doesn't work for animation. The following will stop animations working for all browsers:

animation: none\9;

I want to do this in my existing stylesheet, without using JavaScript or conditional stylesheets.

回答1:

This has got to be one of the most peculiar edge cases in CSS I've seen yet. I have to say, hats off to you for finding — well, stumbling across — this.

The reason why the \9 hack fails for the animation property is because, unlike with most other properties, an identifier that ends in \9 is actually a valid value for animation-name, which accepts an identifier. In this case, the \9 represents a hexadecimal escape sequence; what browsers end up doing is accepting the declaration and looking for a @keyframes rule named none\9, or more precisely, an identifier consisting of the word "none" directly followed by U+0009 CHARACTER TABULATION, better known as the tab character "\t", normally considered whitespace in CSS.¹ The reference to your original animation is lost, and so the element no longer animates.

¹_{This is technically what happens whenever the \9 hack is used; the hack exploits the fact that this usually results in a parse error on browsers other than IE. Not so for animation-name, as it turns out.}

How to solve your problem of stopping the animation only on IE10 is a little tricky. You can use the \9 hack, but with another property — animation-play-state, and furthermore this requires that you want your element to look the same and have the same styles as the animation's starting point in IE10, because what this effectively does is freeze it at the animation's starting point:

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

Unfortunately I don't have a computer running IE10 to test this with, so if you find that the animation is being paused on IE11 as well you will need to add another CSS rule with the following selector hack from 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; }
}