[英]FireFox CSS Animations not functioning.
Over at blog.etree.biz/shops.html @keyframe
is not working on the firefox browser. 在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>
From my knolage the simple animations version should work, however after following firefoxe's developer example i am still unable to get the code to function on that browser. 从我的knolage简单的动画版本应该工作,但是在关注firefoxe的开发人员示例后,我仍然无法让代码在该浏览器上运行。
What is the issue, and is there a possible fix? 问题是什么,有可能解决吗?
Last keyframe you have a "{" missing at 20%, don't know if it's beacause of it, but you should fixit anyway. 最后一个关键帧你有一个“{”缺少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;}
Background section : 背景部分:
@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");}
}
At the and of 20% you have a ';' 在20%和20%你有一个';' in more
在更多
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.