Question

在blog.etree.biz/shops.html @keyframe上没有使用firefox浏览器。

<style>
.content-fauxcolumns, .content {
 background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/jkbg.jpg");
-webkit-animation: backgrounds 30s infinite;
    animation: backgrounds 30s infinite;

}
@-webkit-keyframes backgrounds {
    0%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/ascotbg.jpg");}
    20%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/jayseebg.jpg");}
    40%  { background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/winebg.jpg");}
    60%  {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/shedbg.jpg");}
    80% {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/snowbg.jpg");}
    95% {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/glovesbg.jpg");}
    100%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/ascotbg.jpg");}
}

@keyframes backgrounds {
    0%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/ascotbg.jpg");}
    20%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/jayseebg.jpg";);}
    40%  { background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/winebg.jpg");}
    60%  {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/shedbg.jpg");}
    80% {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/snowbg.jpg");}
    95% {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/glovesbg.jpg");}
    100%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/ascotbg.jpg");}
}
.content-fauxcolumns, .etreefooter, #navlinks, .mainmenu, #navlinks:link, #navlinks:visited, .etreeMobileHeader {
background-color:#41873A;
color:#FFF;
-webkit-animation: backgroundColor 30s infinite;
    animation: backgroundColor 30s infinite;
}
@-webkit-keyframes backgroundColor {
    0%   {background-color:#41873A;}
    20%   {background-color:#B6B757;}
    40%  {background-color:#9C2757;}
    60%  {background-color:#749B1D;}
    80% {background-color:#284C9C;}
    95% {background-color:#AE4F06;}
    100%   {background-color:#41873A;}
}

@keyframes backgroundColor {
    0%   {background-color:#41873A;}
    20%   background-color:#B6B757;}
    40%  {background-color:#9C2757;}
    60%  {background-color:#749B1D;}
    95% {background-color:#AE4F06;}
    100%   {background-color:#41873A;}
}
#navlinks:hover, #navlinks:active {
background-color:#FFF;
}
</style>

从我的知识开始，简单的动画版本应该可以使用，但是在关注firefoxe的开发者示例后，我仍然无法让代码在该浏览器上运行。

问题是什么，是否有可能解决？

Answer 1

你有一个＆＃34; {＆＃34;错过了20％，不知道是不是因为它，但你还是应该修理。

@keyframes backgroundColor {
    0%   {background-color:#41873A;}
    20%   background-color:#B6B757;}
    40%  {background-color:#9C2757;}
    60%  {background-color:#749B1D;}
    95% {background-color:#AE4F06;}
    100%   {background-color:#41873A;}

背景部分：

@keyframes backgrounds {
    0%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/ascotbg.jpg");}
    20%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/jayseebg.jpg";);}
    40%  { background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/winebg.jpg");}
    60%  {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/shedbg.jpg");}
    80% {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/snowbg.jpg");}
    95% {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/glovesbg.jpg");}
    100%   {background-image: url("http://www.etree.biz/wp-content/themes/Etree%20Theme/images/ascotbg.jpg");}
}

在20％的情况下，你有一个＆＃39 ;;＆＃39;更多

FireFox CSS动画无法正常运行。

1 个答案: