CSS:为什么这个背景动画只适用于 chrome？它不适用于 Firefox 或 IE

Question

CSS:为什么这个背景动画只适用于 chrome？它不适用于 Firefox 或 IE。

#lightbar{
width: 100%;
height:400px;
position: relative;
overflow: hidden;
z-index: -1;
background:url("light.png"); 
background-size:150px;
background-repeat:no-repeat;
background-position: 8% 0%;
-webkit-animation: navLight 30s ; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;
animation-name:navLight
animation-duration:30s;
animation-iteration-count: infinite;}

我的 chrome safari 和 opera 动画。

@-webkit-keyframes navLight {
0%   {     background-position: 7.5% 0%; background-size:400px; top:0px; margin-top: -20px;}  
5%   {     background-position: 15% 0%;background-size:150px;top:80px;}

15%   {     background-position: 38% 0%;background-size:150px;top:100px;}
 20%   {     background-position: 37% 0%; background-size:400px; top:0px; margin-top: -20px;
  -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg);
transform: rotate(360deg);}  
 25%   {     background-position: 38% 0%;background-size:150px;top:100px;}

 30%   {     background-position: 65% 0%;background-size:150px;top:100px;}
 35%   {     background-position: 67% 0%; background-size:400px; top:0px; translateY: -5%;
 -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */  transform: rotate(0deg);}       
 40%   {     background-position: 65% 0%;background-size:150px;top:100px;}

 50% {    background-position: 89% 0%; background-size:150px;top:100px;}
 55%   {     background-position: 97% 0%; background-size:400px; top:0px; 
 -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  transform: rotate(360deg);}   
 60%   {     background-position: 89% 0%;background-size:150px;top:100px;

 65%   {     background-position: 65% 0%;background-size:150px;top:100px;}
 70%   {     background-position: 67% 0%; background-size:400px; top:0px; 
 -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */  transform: rotate(0deg);}     
 75%   {     background-position: 65% 0%;background-size:150px;top:100px;}

 80%   {     background-position: 37% 0%;background-size:150px;top:100px;}
 85%   {     background-position: 37% 0%; background-size:400px; top:0px; margin-top: -20px;
  -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  transform: rotate(360deg);}  
 90%   {     background-position: 37% 0%;background-size:150px;top:100px;} 

  95%   {     background-position: 20% 5%;background-size:150px;top:80px;}
   0%   {     background-position: 7.5% 0%; background-size:400px; top:0px; margin-top: -20px;
  -ms-transform: rotate(120deg); /* IE 9 */ -webkit-transform: rotate(120deg); transform:     rotate(120deg);}  }

适用于 IE 和 Firefox我知道我不需要使用 -ms- 为什么它不起作用

     @keyframes navLight {
    0%   {     background-position: 7.5% 0%; background-size:400px; top:0px; margin-top: -20px;}  
    5%   {     background-position: 15% 0%;background-size:150px;top:80px;}

     15%   {     background-position: 38% 0%;background-size:150px;top:100px;}
     20%   {     background-position: 37% 0%; background-size:400px; top:0px; margin-top: -20px;
      -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  transform: rotate(360deg);}  
     25%   {     background-position: 38% 0%;background-size:150px;top:100px;}

     30%   {     background-position: 65% 0%;background-size:150px;top:100px;}
     35%   {     background-position: 67% 0%; background-size:400px; top:0px; translateY: -5%;
     -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */  transform: rotate(0deg);}       
     40%   {     background-position: 65% 0%;background-size:150px;top:100px;}

     50% {    background-position: 89% 0%; background-size:150px;top:100px;}
     55%   {     background-position: 97% 0%; background-size:400px; top:0px; 
     -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  transform: rotate(360deg);}   
     60%   {     background-position: 89% 0%;background-size:150px;top:100px;

     65%   {     background-position: 65% 0%;background-size:150px;top:100px;}
     70%   {     background-position: 67% 0%; background-size:400px; top:0px; 
     -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */  transform: rotate(0deg);}     
     75%   {     background-position: 65% 0%;background-size:150px;top:100px;}

     80%   {     background-position: 37% 0%;background-size:150px;top:100px;}
     85%   {     background-position: 37% 0%; background-size:400px; top:0px; margin-top: -20px;
      -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */  transform: rotate(360deg);}  
     90%   {     background-position: 37% 0%;background-size:150px;top:100px;} 

      95%   {     background-position: 20% 5%;background-size:150px;top:80px;}
       0%   {     background-position: 7.5% 0%; background-size:400px; top:0px; margin-top: -20px;
      -ms-transform: rotate(120deg); /* IE 9 */ -webkit-transform: rotate(120deg); transform: rotate(120deg);} 
}

Answer 1

首先:您应该尝试发布更好的问题。您的代码非常庞大且笨拙，而且格式很奇怪。我们不知道你想要完成什么，而且很难破译。您还应该用占位符替换您自己的图片，就像我在下面的代码片段中所做的那样，甚至尝试添加您自己的代码片段并提及它目前仅在 Chrome 中有效，您想知道为什么。

我已经清理了你的代码(花了我大约十分钟)并且它可以进一步结构化，但我删除了所有重复的注释，放入一致的空格和制表符并使其更易于阅读。更简单的方法是在单行中声明所有内容，但是没关系。

调用动画时，有一个简单的简写语法:animation: name duration repeat;(这里还有更多内容:https://developer.mozilla.org/en/docs/Web/CSS/animation)。我在示例中使用它，这意味着您只需为每个 -prefix- 声明一件事。我还在 CSS 中排列了 animation 属性。

快速提醒:今天你应该只使用 -webkit- 前缀，因为所有其他浏览器(它们的最新版本和使用最广泛的版本)都支持无前缀语法。 (Chrome 甚至想完全摆脱前缀)。另请注意，您可以在 @keyframes 和 @-webkit-keyframes 中使用完全相同的代码，因此您只需确保一个并将其复制到另一个。

以下代码段已在 Safari 8、Firefox 39.0 上测试

@-webkit-keyframes navLight {
    00% { background-position: 7.5% 0%; background-size: 400px; top: 0px; margin-top: -20px; }  
    05% { background-position: 15% 0%; background-size: 150px; top: 80px; }
    15% { background-position: 38% 0%; background-size: 150px; top: 100px; }
    20% { background-position: 37% 0%; background-size: 400px; top: 0px; margin-top: -20px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }  
    25% { background-position: 38% 0%; background-size: 150px; top: 100px; }
    30% { background-position: 65% 0%; background-size: 150px; top: 100px; }
    35% { background-position: 67% 0%; background-size: 400px; top: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }       
    40% { background-position: 65% 0%; background-size: 150px; top:100px; }
    50% { background-position: 89% 0%; background-size: 150px; top: 100px; }
    55% { background-position: 97% 0%; background-size: 400px; top: 0px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }   
    60% { background-position: 89% 0%; background-size: 150px; top: 100px; }
    65% { background-position: 65% 0%; background-size: 150px; top: 100px; }
    70% { background-position: 67% 0%; background-size: 400px; top: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }     
    75% { background-position: 65% 0%; background-size: 150px; top: 100px; }
    80% { background-position: 37% 0%; background-size: 150px; top: 100px; }
    85% { background-position: 37% 0%; background-size: 400px; top: 0px; margin-top: -20px; -webkit-transform: rotate(360deg);  transform: rotate(360deg); }  
    90% { background-position: 37% 0%; background-size: 150px; top: 100px; } 
    95% { background-position: 20% 5%; background-size: 150px; top: 80px; }
    100% { background-position: 7.5% 0%; background-size: 400px; top: 0px; margin-top: -20px; -webkit-transform: rotate(120deg); transform: rotate(120deg); }
}

@keyframes navLight {
    00% { background-position: 7.5% 0%; background-size: 400px; top: 0px; margin-top: -20px; }  
    05% { background-position: 15% 0%; background-size: 150px; top: 80px; }
    15% { background-position: 38% 0%; background-size: 150px; top: 100px; }
    20% { background-position: 37% 0%; background-size: 400px; top: 0px; margin-top: -20px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }  
    25% { background-position: 38% 0%; background-size: 150px; top: 100px; }
    30% { background-position: 65% 0%; background-size: 150px; top: 100px; }
    35% { background-position: 67% 0%; background-size: 400px; top: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }       
    40% { background-position: 65% 0%; background-size: 150px; top:100px; }
    50% { background-position: 89% 0%; background-size: 150px; top: 100px; }
    55% { background-position: 97% 0%; background-size: 400px; top: 0px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }   
    60% { background-position: 89% 0%; background-size: 150px; top: 100px; }
    65% { background-position: 65% 0%; background-size: 150px; top: 100px; }
    70% { background-position: 67% 0%; background-size: 400px; top: 0px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }     
    75% { background-position: 65% 0%; background-size: 150px; top: 100px; }
    80% { background-position: 37% 0%; background-size: 150px; top: 100px; }
    85% { background-position: 37% 0%; background-size: 400px; top: 0px; margin-top: -20px; -webkit-transform: rotate(360deg);  transform: rotate(360deg); }  
    90% { background-position: 37% 0%; background-size: 150px; top: 100px; } 
    95% { background-position: 20% 5%; background-size: 150px; top: 80px; }
    100% { background-position: 7.5% 0%; background-size: 400px; top: 0px; margin-top: -20px; -webkit-transform: rotate(120deg); transform: rotate(120deg); }
}

#lightbar {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    z-index: -1;
    background:url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350×250&w=350&h=250"); 
    background-size:150px;
    background-repeat:no-repeat;
    background-position: 8% 0%;
    -webkit-animation: navLight 30s infinite;
            animation: navLight 30s infinite;
}

<div id="lightbar"></div>