Css 动画不能只在 chrome 下工作

Question

重复警告，抱歉。

我已经阅读了几篇类似的文章，并尝试了所有解决方案，但没有一个奏效。

我有非常简单的动画，可以隐藏、显示和图像。

#top_heading .chmurka2{
position:absolute;
top:0;
left:257px;
-webkit-animation: top_chmurka2 8s 1s infinite alternate;
   -moz-animation: top_chmurka2 8s 1s infinite alternate;
    -ms-animation: top_chmurka2 8s 1s infinite alternate;
     -o-animation: top_chmurka2 8s 1s infinite alternate;
        animation: top_chmurka2 8s 1s infinite alternate;

}

@-webkit-keyframes top_chmurka2 { /*chrome and safari*/
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes top_chmurka2{ /*mozilla*/
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-ms-keyframes top_chmurka2{ /*before IE 10*/
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes top_chmurka2{ /*IE9+, Opera*/
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@keyframes top_chmurka2 { /*standard*/
  0%  { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

尽管我使用 -webkit- ，但它在除 Chrome 之外的所有主要浏览器上都运行良好。 到底是怎么回事？ (我也试过使用 -webkit- inside keyframes 规则，但效果不佳)

Answer 1

显然我的动画代码没问题，但我的 chrome 却不行。