Html CSS3淡入淡出背景图像动画-Firefox
好的,我有一个例子: 它在Chrome上运行良好,但在Firefox中却不行。有人知道为什么吗 HTML只使用一个带有.front类的div。以下是CSS的代码:Html CSS3淡入淡出背景图像动画-Firefox,html,image,css,background,Html,Image,Css,Background,好的,我有一个例子: 它在Chrome上运行良好,但在Firefox中却不行。有人知道为什么吗 HTML只使用一个带有.front类的div。以下是CSS的代码: .front { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; position: static; -webkit-animati
.front {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: static;
-webkit-animation: fading 3s infinite;
animation: fading 3s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
font-size: 1em;
-webkit-font-smoothing: subpixel-antialiased;
text-shadow: 0 0 1px rgba(0,0,0,0.3);
-webkit-text-stroke: 1px transparent;
}
@-webkit-keyframes fading {
0%, 35% { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
65%, 100% { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
@keyframes fading {
0%, 35% { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
65%, 100% { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
@-moz-keyframes fading {
0%, 35% { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
65%, 100% { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
不幸的是,Firefox无法转换背景图像。。所以你必须用另一种方法 下面是另一个与您的问题相关的stackoverfow问题,以及一些备选方案:
谢谢您提供的信息。我不知道。我真的不希望它出现在Firefox、IE中,但绝对不会出现在FF中。我将改用jQuery。它是跨浏览器的。