webkit-animation问题

Question

两三个星期后，我的Chrome 43没有显示我的CSS动画。我没有改变任何东西，它在一秒钟内发生而没有任何代码更改。

@-moz-keyframes animaciya {   
  from {background-color: #EF7877;}  
  to {background-color: #dddd00;} 
}

@-ms-keyframes animaciya {
  from {background-color: #EF7877;}
  to {background-color: #dddd00;}
}

@-webkit-keyframes animaciya {
  from { background-color: #EF7877; }
  to { background-color: #dddd00; }
}

.attention {
  -moz-animation: animaciya 0.5s ease-in-out 1s infinite alternate;
  -webkit-animation: animaciya 0.5s ease-in-out 1s infinite alternate;
  -ms-animation: animaciya 0.5s ease-in-out 1s infinite alternate;
}

我在2012年或2014年发现了很多关于它的帖子，但就我而言，它发生在几周前。我还发现我的Sencha Touch应用程序也不会在Chrome上滚动，因为webkit-transform: translate3d()。

这是一个新的错误吗？

Answer 1

Chrome 43不需要动画的供应商前缀，因此您必须在最后添加：

@keyframes animaciya {
  from { background: #EF7877; }
  to { background: #dddd00; }
}

然后在底部添加：

animation: animaciya 0.5s ease-in-out 1s infinite alternate;

更多信息：http://caniuse.com/#search=css3%20animation

笔：http://codepen.io/vandervals/pen/JdbeJe

Answer 2

好吧，重点是 - 动画被另一个具有背景色的类所覆盖。但它仍然很有趣，为什么它突然发生，为什么它仍然可以在其他浏览器中使用