css圖像重疊轉換

我正在嘗試創建一個由4幅圖像組成的動畫HTML/CSS橫幅添加（HPU 300x600px max.80KB）（從一個轉換到下一個轉換平滑淡入淡出的4個階段）。爲了保持文件的大小，我做了部分透明的圖像2，並且想法是它們淡入和覆蓋製作最終圖像。css圖像重疊轉換

我試過這個答案的方法：Multiple image cross fading in CSS - without (java) script但是圖像在每次轉換中都消失了。

我也嘗試過演示3（演示與多個圖像）在這裏：http://css3.bradshawenterprises.com/cfimg/#cfimg3但在第一個循環中顯示所有4個圖像。

我還能試試嗎？謝謝！

來源

2016-05-17 Max

我開發瘋尺寸過橫幅; d

我有這樣的例子，我覺得是你的 http://codepen.io/tarod_spj/pen/EyxVrg

在這種情況下，類似我把元素絕對有這樣的diferents的z-index ：

.img1 { 
    .animationSimple(animationIn forwards @timeImg1 ease @delayImg1 1); z-index: 10; 
} 

.img2 { 
    .animationSimple(animationIn forwards @delayImg2 ease @delayImg2 1); z-index: 20; 
}

它們都以不透明度開始：0; 和第一個img我通常放在廣告的背景。

如果你能解釋更多你需要的，也許我可以幫助你更好

來源

2016-05-30 09:08:04

css圖像重疊轉換

回答

相關問題