CSS帮助可以somone请告诉我为什么这个背景动画只适用于chrome？它不适用于Firefox或IE

CSS help Can somone please tell me why this the background animation is only working for chrome? Its not work on firefox or IE

CSS帮助可以somone请告诉我为什么这个背景动画只适用于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;}

my animation for chrome safari and opera.

我的动画片为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);}  }

for IE and firefox I know i dont need to use -ms- so why doesnt it work

对于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);} 
}

1 个解决方案

#1

First off: You should try to post better questions. Your code is very big and unwieldy, and strangely formatted at that. We don't know what you are trying to accomplish, and it's hard to decipher. You should also replace your own image with a placeholder, like I did in the below snippet, and even try to add your own snippet and mention that it currently only works in Chrome and you are wondering why.

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

I have cleaned up your code (took me about ten minutes) and it can be structured further, but I removed all the repetitive comments, put in consistent spaces and tabs and make it in all easier to read. Easier still would be to declare everything on single lines, but okay.

我已经清理了你的代码(花了我大约十分钟),它可以进一步构建,但我删除了所有重复的注释,放入一致的空格和标签,使其更容易阅读。更简单的方法是将所有内容都声明为单行,但没关系。

When calling an animation, there is an easy, short-hand syntax: animation: name duration repeat; (theres more to that here: https://developer.mozilla.org/en/docs/Web/CSS/animation). I am using it in the example, and it means you only have declare one thing for every -prefix-. I also lined up the animation properties in the CSS.

调用动画时,有一种简单,简洁的语法:动画:名称持续时间重复; (此处更多内容:https://developer.mozilla.org/en/docs/Web/CSS/animation)。我在示例中使用它,这意味着您只为每个-prefix-声明了一件事。我还在CSS中排列了动画属性。

A quick reminder: today you should only use the -webkit- prefix as all other browsers (the most recent versions of them and the most widely used ones) support unprefixed syntaxes. (Chrome even wants to get rid of prefixes altogether). Also note that you can use exactly the same code in both @keyframes and @-webkit-keyframes, so you only have to be sure of one and copy it to the other.

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

The following snippet was tested on Safari 8, Firefox 39.0

以下代码片段在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>