-webkit-animation-name css 选择器错误答案

【问题标题】：-webkit-animation-name css selector bug-webkit-animation-name css 选择器错误
【发布时间】：2013-09-23 00:00:46
【问题描述】：

这是一个错误吗？在 safari 和 chrome 上 -webkit-animation-name 似乎没有正确覆盖。下面的 CSS 应该会对名为 title 的 h1 标签产生可怕的闪烁效果，但动画无法运行；

@-webkit-keyframes flash2 {
    0% { background-color: red; }
    100% { background-color: blue; }
}
@-ms-keyframes flash2 {
    0% { background-color: red; }
    100% { background-color: blue; }
}
h1 {
    /* this breaks the animation on chrome,safari */
    -webkit-animation-name: none;
    -ms-animation-name: none;
}
h1#title {
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: flash2;

    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: flash2;
}

http://jsfiddle.net/DQ96d/5/ 这是一个错误吗？

无论哪种方式，我都想记录我的发现，因为它花费了我很多时间来解决。起初我看不到这一点的主要原因是因为 chrome (F12) 中的检查器表明 css 选择器已正确确定优先级，并且-webkit-animation-name 确实显示了flash2。但是 - 动画无法运行。

希望这可能对其他人有所帮助。解决方法似乎是您不能在多个 CSS 选择器中拥有该属性。奇怪的是，如果你在一条规则中列出两次，它并没有破坏。

【问题讨论】：

请在crbug.com/new 报告错误。 PS。您的第一个 ms 前缀缺少连字符。
就此而言，您甚至不需要 -ms- 前缀 - 任何稳定版本的 IE 都不使用它。
IE10 似乎接受 -ms 前缀。该演示在 IE10 中可以正常工作（只要我缺少连字符）。
我已经在 Chrome 中使用 Tools->Report an issue... 提交了一个错误（我在 Safari 中做了类似的事情）。这会通过 Chromium 项目还是会消失在企业营销机器中？
对不起，应该是“任何稳定版本的 IE 都不需要它”。 IE10接受前缀，但也接受不带前缀的，所以完全去掉前缀就OK了。

标签： css css-selectors google-chrome-devtools css-animations

【解决方案1】：

尝试给 h1 一个虚拟名称，而不是“none”，例如：

-webkit-animation-name: test;

看起来像这样可以正常工作。

【讨论】：

奇怪。所以“none”听起来像是一个“特殊”（不幸的）代码路径。