-webkit动画迭代次数:无限;处理一个样式表，但不处理另一个

Question

好吧，这段代码适用于我作为POC:组合在一起的一些简单的东西

.linedcircle
{
width:668px;
height:668px;
background:url(https://robertsspaceindustries.com/rsi/static/images/error/lined_circle.png);
position:relative;
margin: 10px auto 0;
animation:rotating 8s;
animation-timing-function:linear;
animation-iteration-count:infinite;
-webkit-animation:rotating 10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
@keyframes rotating {
0%   {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotating
{
0%   {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}

这个圆圈无限旋转，通常没有问题。然而，在不同的样式表上使用此代码：

.burna{
animation:fadein 0.50s;
animation-timing-function:linear;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-webkit-animation:fadein 0.50s;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes fadein { 
0%{opacity:0;}
40%{opacity:1;}
50%{opacity:1;}
100%{opacity:0.05;} 
}
@keyframes fadein {
0%{opacity:0;}
40%{opacity:1;}
50%{opacity:1;}
100%{opacity:0.05;} 
}

动画只播放一次。我最初以为这是我的javascript或类似的东西，但事实并非如此。我可以将迭代次数更改为我想要的任何次数，它仍然只播放一次动画。它在Firefox上运行得很好，只是在Chrome上没有，我想我已经追踪到了CSS本身，但一切看起来都是正确的。所以我不完全确定我在这里做错了什么。如有任何建议，我们将不胜感激。

Answer 1

CSS文件上的顺序有时很重要，在第二个示例中，首先声明animation，然后声明其他属性，如iteration-count:

-webkit-animation:fadein 0.50s; /*This first*/
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;

Fiddle演示