CSSイメージオーバーレイ遷移

Question

は、私は（HPU 300x600px max.80KB）は4枚の画像（次へ1からの移行では4段階のスムーズなフェード）で構成されたアニメーションのHTML/CSSのバナーアドオンを作成しようとしています。ファイルサイズを抑えるために、私は、画像2、3 & 4が部分的に透明にしているとの考えは、彼らがフェードインし、最終的な画像を作る重ねることです。

私はこの答えでアプローチを試しました：Multiple image cross fading in CSS - without (java) scriptしかし、画像は各トランジションで消えます。

私はデモ3（デモ：複数画像あり）をここで試しました：http://css3.bradshawenterprises.com/cfimg/#cfimg3しかし、最初のループでは4つの画像すべてが表示されます。

私は他に何を試すことができますか？ありがとう！

Answer 1

私はあまりにも非常識なサイズのバナーを開発、D

が、私はこの例を持って、私はこのケースでは、あなた http://codepen.io/tarod_spj/pen/EyxVrg

に似ている私はこのようなdiferents Zインデックスと絶対に要素を置くと思います：

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

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

それらのすべてが不透明で始まる：0; と私は通常、広告の背景のように入れて最初のimg。

あなたが必要とするものをさらに説明できる場合は、おそらく私はあなたを助けることができます。