css - Firefox 中的关键帧不起作用

Question

我已经在本网站和其他地方搜索过有关这方面的帮助，但似乎无法弄清楚发生了什么以及为什么它不起作用。我已经能够让它在 Chrome、Safari、Opera 和 IE 中运行。你愿意帮我看看吗？如果代码显示不正确，我深表歉意，这是我的第一篇文章。 (网址 www.djopus.com)

.flexslider {
border: 0;
position: relative;
zoom: 1;
height: auto;
-webkit-animation:uplighting 10s; /* Chrome, Safari, Opera */
-moz-animation:uplighting 10s;
animation:myfirst 10s;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes uplighting
{
0% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);}
20% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);}
40% {-webkit-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);}
60% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);}
80% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);}
90% {-webkit-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);}
100% {-webkit-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);}
}

@-moz-keyframes uplighting
{
0% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,46,46,1);}
20% {-webkit-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(245,245,46,1);}
40% {-webkit-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);
box-shadow: 0px 5px 65px 16px rgba(63,245,46,1);}
60% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);
box-shadow: 0px 5px 65px 16px rgba(0,255,242,1);}
80% {-webkit-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);
box-shadow: 0px 5px 65px 16px rgba(0,13,255,1);}
90% {-webkit-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);
box-shadow: 0px 5px 65px 16px rgba(221,0,255,1);}
100% {-webkit-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
-moz-box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);
box-shadow: 0px 5px 65px 16px rgba(255,0,0,1);}
}


/* Standard syntax */
@keyframes uplighting
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
} 

Answer 1

您忘记将动画名称从“myfirst”更改为“uplighting”:)

这是非常复杂的代码的结果，可以很容易地简化。所有现代桌面浏览器都支持没有供应商特定前缀的动画。如果你真的需要它，你只需要在一些智能手机上为 Safari 使用 -webkit。有关更多详细信息，请参阅以下文章:Blink HTML text tag and its alternatives ，那里解释了 CSS 动画兼容性。

所以，CSS 应该像下面这样:

.flexslider {
  border: 0;
  position: relative;
  zoom: 1;
  height: auto;
  animation: uplighting 10s infinite;
}

@keyframes uplighting
{
  0% { background: red }
  25% { background: yellow }
  50% { background: blue }
  100% { background: green }
} 

试试这个，您一定会喜欢这个结果!