Crossfade動畫不適用於Firefox，IE或Opera

我想寫一個簡單的CSS交叉淡入淡出動畫，可以在4種不同的圖像之間切換，但它不適用於任何Firefox版本（我正在測試這個v。 30），Internet Explorer或Opera。不過，它在Chrome和Safari中運行良好。Crossfade動畫不適用於Firefox，IE或Opera

我看了一遍，看到類似的問題，但可悲的是沒有解決方案的工作。非常奇怪的是，我有一個更復雜的交叉淡入淡出動畫，可以在圖像之間使用緩入和緩出來工作和轉換，並且在所有瀏覽器上都可以很好地工作。（我可以將其發佈以供參考）

我已經嘗試了這兩個有和沒有單個瀏覽器的標記具有相同的結果。另外，我聽說通用標記應該總是最後一個，但這樣做會產生相同的結果。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="crossfade.css"> 
</head> 
    <div id="crossfade"> 
    </div> 
</html>

CSS：這裏

#crossfade { 
    width: 1000px; 
    height: 200px; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation: myfirst 30s infinite; /* Chrome, Safari, Opera */ 
    -moz-animation: myfirst 30s infinite ; 
    -o-animation: myfirst 30s infinite; 
    -ms-animation: myfirst 30s infinite; 
    animation: myfirst 30s infinite; 
} 

@-webkit-keyframes myfirst { 
    0% {background-image:url('images/summerbg1.png');} 
    35% {background-image:url('images/summerbg2.png');} 
    75% {background-image:url('images/summerbg3.png');} 
    100% {background-image:url('images/summerbg4.png');} 
} 

@-moz-keyframes myfirst { 
    0% {background-image:url('images/summerbg1.png');} 
    35% {background-image:url('images/summerbg2.png');} 
    75% {background-image:url('images/summerbg3.png');} 
    100% {background-image:url('images/summerbg4.png');} 
} 

@-o-keyframes myfirst { 
    0% {background-image:url('images/summerbg1.png');} 
    35% {background-image:url('images/summerbg2.png');} 
    75% {background-image:url('images/summerbg3.png');} 
    100% {background-image:url('images/summerbg4.png');} 
} 

@-ms-keyframes myfirst { 
    0% {background-image:url('images/summerbg1.png');} 
    35% {background-image:url('images/summerbg2.png');} 
    75% {background-image:url('images/summerbg3.png');} 
    100% {background-image:url('images/summerbg4.png');} 
} 

@keyframes myfirst { 
    0% {background-image:url('images/summerbg1.png');} 
    35% {background-image:url('images/summerbg2.png');} 
    75% {background-image:url('images/summerbg3.png');} 
    100% {background-image:url('images/summerbg4.png');} 
}

來源

2014-07-07 Adam West

您可以創建四個獨立的div（每個BG）和進出不透明度淡出他們。 –

根據MDN背景圖片不具動畫性，所以我很驚訝它可以在鉻合金中使用。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties –

@RobErskine我會考慮這樣做併發布我的結果。 –

每羅布的建議，是我做的，用圖的標籤，而不是股利。它看起來與動畫幾乎完全相同，但適用於IE，Firefox，Chrome，Opera和Safari。（但是，我沒有，但是，在8以前的IE版本上測試）。

HTML：

<html> 
<head> 
    <title>Site</title> 
    <link rel="stylesheet" type="text/css" href="crossfade.css"> 
</head> 

<div id="xfade"> 

    <figure> 
     <img src="Summer/images/summerbg1.png" /> 
    </figure> 
    <figure> 
     <img src="Summer/images/summerbg2.png" /> 
    </figure> 
    <figure> 
     <img src="Summer/images/summerbg3.png" /> 
    </figure> 
    <figure> 
     <img src="Summer/images/summerbg4.png" /> 
     </figure> 

</div> 
</html>

CSS：

#xfade{ 
    position: relative; 
    max-width: 1000px; 
    height: 200px; 
    margin: 0 auto; 
} 
#xfade figure{ 
    margin: 0 auto; 
    max-width: 1000px; 
    height: 200px; 
    position: absolute; 
} 
#xfade img{ 
    width: 1000px; 
    height: 200px; 
} 

#xfade figure{ 
    opacity:0; 
} 


figure:nth-child(1) { 
    animation: xfade 48s 0s infinite; 
    -moz-animation: xfade 48s 0s infinite; /* Firefox */ 
    -webkit-animation: xfade 48s 0s infinite; /* Safari and Chrome */ 
    -o-animation: xfade 48s 0s infinite; 
} 
figure:nth-child(2) { 
    animation: xfade 48s 12s infinite; 
    -moz-animation: xfade 48s 12s infinite; /* Firefox */ 
    -webkit-animation: xfade 48s 12s infinite; /* Safari and Chrome */ 
    -o-animation: xfade 48s 12s infinite; 
} 
figure:nth-child(3) { 
    animation: xfade 48s 24s infinite; 
    -moz-animation: xfade 48s 24s infinite; /* Firefox */ 
    -webkit-animation: xfade 48s 24s infinite; /* Safari and Chrome */ 
    -o-animation: xfade 48s 24s infinite; 
} 
figure:nth-child(4) { 
    animation: xfade 48s 36s infinite; 
    -moz-animation: xfade 48s 36s infinite; /* Firefox */ 
    -webkit-animation: xfade 48s 36s infinite; /* Safari and Chrome */ 
    -o-animation: xfade 48s 36s infinite; 
} 

@-webkit-keyframes xfade{ /* Safari and Chrome */ 
    0%{ 
    opacity: 0; 
    } 
    2%{ 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    40%{ 
    opacity: 0; 
    } 
} 

@-moz-keyframes xfade { 
    0%{ 
    opacity: 0; 
    } 
    2%{ 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    40%{ 
    opacity: 0; 
    } 
} 

@-o-keyframes xfade { 
    0%{ 
    opacity: 0; 
    } 
    2%{ 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    40%{ 
    opacity: 0; 
    } 
} 

@-ms-keyframes xfade { 
    0%{ 
    opacity: 0; 
    } 
    2%{ 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    40%{ 
    opacity: 0; 
    } 
} 

@keyframes xfade{ 
    0%{ 
    opacity: 0; 
    } 
    2%{ 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    40%{ 
    opacity: 0; 
    } 
}

來源

2014-08-03 16:23:26

Crossfade動畫不適用於Firefox，IE或Opera

回答

相關問題