css图像覆盖过渡

Question

我正在尝试创建一个由4个图像组成的动画HTML/CSS横幅添加（HPU 300x600px最大800KB）（从一个图像到下一个图像的4个阶段平滑渐变）。为了降低文件大小，我制作了图像2、3和4；4部分透明，其理念是它们淡入并覆盖形成最终图像。

我在这个答案中尝试了这种方法：在没有（java）脚本的情况下，CSS中的多个图像交叉衰落，但图像在每次转换中都会消失。

我还在这里尝试了Demo 3（带有多个图像的Demo）：http://css3.bradshawenterprises.com/cfimg/#cfimg3但是在第一循环中，显示了所有4个图像。

我还能尝试什么？谢谢

Answer 1

我也开发了尺寸疯狂的横幅；D

我有一个例子，我想和你的相似http://codepen.io/tarod_spj/pen/EyxVrg

在这种情况下，我把元素放在具有不同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就像广告的背景。

如果你能解释更多你需要的东西，也许我可以帮助你更好地