Firefox中的关键帧无法正常工作

时间:2015-01-07 06:06:06

标签: css3 firefox css-animations

我在这个网站和其他地方都搜索过这方面的高低帮助,但似乎无法弄清楚发生了什么以及它为什么不起作用。我已经能够在Chrome,Safari,Opera和IE中使用它。你愿意看看并帮助我吗?如果代码没有正确显示,我很抱歉,这是我的第一篇文章。 (URL 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;}
} 

1 个答案:

答案 0 :(得分:0)

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

这是非常复杂的代码的结果,可以很容易地简化。所有现代桌面浏览器都支持动画,没有特定于供应商的前缀。如果你真的需要,你只需要在某些智能手机上使用-webkit for Safari。有关更多详细信息,请参阅以下文章: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 }
} 

试试这个,你肯定会喜欢这个结果!