CSS 多图像交叉淡入淡出

Question

我已经搜索了几个小时来寻找这个问题的答案，但我仍然没有想出任何真正有效的方法!

我有一个包含 3 个 img 元素的 div。我想在无限循环中逐个淡入淡出。

我知道它可能包含动画，但我不能确切地理解它是如何工作的以及我需要更改哪些位来使淡入淡出适应我的需要。

感谢大家的帮助!我真的很感激这一点，只是想弄清楚这一点，因为我以前使用过 .gifs，我觉得是时候继续前进了!

以防万一您确实需要代码:

    <div id="showcase">
        <img src="../images/showcase/iphone2.png" width="175" height="202" />
        <img src="../images/showcase/m4.png" width="175" height="202" />
        <img src="../images/showcase/alloy.png" width="175" height="202" />
    </div>

正如我所说的，我看过很多例子，我只是在寻找使用 CSS 从一个例子到另一个例子的基本淡入淡出。我不想使用 JavaScript。

Answer 1

尝试使用 css 动画: http://www.w3schools.com/css3/css3_animations.asp

注意: 这不适用于非 css3 浏览器。