2014-11-16 81 views
0

好了,所以我有這樣的例子:CSS3淡出的背景圖像動畫 - 火狐

http://jsfiddle.net/2uux3jh7/

它正常工作在Chrome,但在Firefox不。有人知道爲什麼

HTML在.front類中只使用一個div。這裏是CSS的代碼:

.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'); } 
} 

回答

0

不幸的是,Firefox不能轉換背景圖像。所以你必須以另一種方式做。

這是另一個與您的問題相關的stackoverfow問題,有一些替代方案。 : CSS3 background image transition

+0

感謝您的信息。我不知道。我真的不希望它在Firefox中,絕對在IE中,但不是FF。我將使用jQuery來代替。它是跨瀏覽器。 – David