IE10 CSS hack的动画属性？ [英] IE10 CSS hack for animation property?

问题描述

是否可能为CSS 动画属性创建IE10黑客？

我使用的是：

  height：70px \9 ; 
  

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

  animation：none\9; 
  

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

解决方案

这必须是CSS中最奇怪的边缘情况之一。

\9 的原因在于， c $ c> hack失败，因为动画属性是因为，与大多数其他属性不同，以 \9 实际上是 动画的有效值-name ，它接受标识符。在这种情况下， \9 表示十六进制转义序列;什么浏览器最终接受声明并寻找 @keyframes 规则 none\9 或更多准确地说，一个由单词none直接跟在U + 0009 CHARACTER TABULATION之后的标识符，更好地称为tab字符\t，通常被视为CSS中的空格

---

p> ¹ _{这是技术上每当使用 \9 黑客利用这一事实，这通常导致在IE以外的浏览器上的解析错误。 animation-name 不是这样的。}

---

如何来解决你的问题，停止动画只在IE10是有点棘手。您可以使用 \9 黑客，但使用另一个属性 - 动画播放状态，此外，这需要你的元素看起来是相同的，并且具有与动画的起始点相同的样式在IE10，因为这有效地是冻结它在动画的起点：

  .element {width：50px; height：50px;背景颜色：黄色;动画：myanim 1s无限替代; / *在IE10 * / animation-play-state中暂停动画为0％：paused\9;} @ keyframes myanim {0％{background-color：yellow; } 100％{background-color：red; }}  

 < div class = element>不幸的是，我没有运行IE10的计算机。
测试这个，所以如果你发现动画正在IE11上暂停，你将需要添加另一个CSS规则与下面的选择器hack从 Jeff Clayton ：
 
 
 
 
 
 
  .element {width：50px; height：50px;背景颜色：黄色;动画：myanim 1s无限替代; / *在IE10 * / animation-play-state中暂停动画为0％：paused\9;} _： -  ms-fullscreen，：root .element {/ *允许动画在IE11 * / animation-play -state：running;} @ keyframes myanim {0％{background-color：yellow; } 100％{background-color：red; }}  
 
 < div class = element> div>  
 
 
 
 
 
 
如果您不想使用< c $ c> \9 可以替换
  animation-play-state：paused \\ \\ 9; 
  
与
  -ms-animation-play-state：paused; 
  
但你肯定需要IE11黑客。无论哪种方式，这仍然依赖于您的静态CSS规则具有与起点相同的样式。
 
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. 
解决方案
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.1 The reference to your original animation is lost, and so the element no longer animates.



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

<div class=element></div>





If you don't want to use the \9 hack you can replace
animation-play-state: paused\9;
with
-ms-animation-play-state: paused;
but you'll definitely require the IE11 hack. Either way this still relies on your static CSS rule having the same styles as the starting point.

                        
这篇关于IE10 CSS hack的动画属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！