<style>元素和CSS动画上的HTML5 Scoped属性

Question

当我了解时，“范围” HTML5文档正文中＆lt; style＆gt; 元素的属性应该限制该父元素的范围。

＆＃xA;＆＃xA;

我'实际上并不需要范围效果，但我确实喜欢添加此属性使得＆lt; style＆gt; 元素在正文中有效HTML5。

＆＃xA;＆＃xA; < p>然而，至少在Firefox上，应用它似乎使动画失败。没有范围属性的Firefox 42令人讨厌地工作，迫使在有效的东西和有效的东西之间做出选择。这是浏览器错误/限制吗？还是我对规格误解了？范围和非范围版本都可以在Chromium中使用。

＆＃xA;＆＃xA;

这里是演示代码，粘贴在这里供参考，但在jsfiddle上查看现场演示。

＆＃xA;＆＃xA;

 ＆lt; div＆gt;＆＃xA; ＆lt;！ - 没有“scoped”属性，它可以工作 - ＆gt;＆＃xA; ＆LT;风格＆GT;＆＃XA; @keyframes anim2 {0％{color：black;} 100％{color：red;}}＆＃xA; div.unscoped {animation-name：anim2;动画持续时间：1秒;动画迭代-数：无限;}＆＃XA; ＆LT; /风格＆GT;＆＃XA; ＆lt;！ - 相同但有范围，不起作用 - ＆gt;＆＃xA; ＆lt; style scoped＆gt;＆＃xA; @keyframes anim {0％{color：black;} 100％{color：red;}}＆＃xA; div.scoped {animation-name：anim;动画持续时间：1秒;动画迭代-数：无限;}＆＃XA; ＆LT; /风格＆GT;＆＃XA; ＆lt;！ - 两个演示div  - ＆gt;＆＃xA; ＆lt; div class =“unscoped”＆gt;有效，嘿，我想念＆amp; lt; blink＆amp; gt;＆lt; / div＆gt;＆＃xA; ＆lt; div class ='scoped'＆gt;在Firefox 42 / Ubuntu中不起作用（但在Chromium中有效）： - （＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;  

＆＃XA;