2

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

@-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 选择器中拥有该属性。奇怪的是，如果你在一条规则中列出两次，它并没有破坏。

4

1 回答 1

0

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

-webkit-animation-name: test;

似乎像这样工作正常。

于 2013-09-18T10:35:07.617 回答