image - 无需悬停的 CSS3 图像转换

Question

我正试图找到一个转换 CSS 代码来转换两个图像。我希望第一个图像显示 4 秒，然后淡入第二个图像，第二个图像将保持不变几秒钟，然后淡出到第一个图像。现在我没有使用 CSS，我发现大多数 CSS 教程都是为 on :hoover 格式化的。我希望我的图像在不需要 :hover 的情况下不断变化。

我现在使用的 flexi 广告编码是一个 ans 在 waterfox 和 explorer 中工作正常，但你可以看到图像在 chrome 中加载时闪烁不佳。

这是我正在使用的示例。我现在使用的脚本实际上是在 30 张图像之间转换，我制作了一些从一张到下一张逐渐淡出的图像，这就是为什么它看起来像是逐渐淡出的原因。我想要某种 CSS，它只需要 2 个图像并且每 4 秒从一个到下一个淡入淡出。

http://www.vulgarmediaproductions.com/walt/walt.shtml

Answer 1

您需要使用 keyframe animations为此 - DEMO

HTML:

<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>

CSS:

img {
    position: absolute;
    width : 320px;
    height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
@keyframes fader { to { opacity: 0; } }

---

编辑

如果您的图像具有透明度，那么您需要为它们设置不透明度动画，而不仅仅是顶部的图像。像这样 - DEMO

img {
    opacity: 0;
    position: absolute;
    width : 256px;
    height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
@keyframes fadein { 50% { opacity: 1; } }
@keyframes fadeout { 50% { opacity: 0; } }

此外，请记住您必须使用前缀(我没有使用任何前缀，因为 dabblet 包含 -prefix-free 并且这样更容易突出这个想法):

img:first-child {
    -webkit-animation: fadein 8s infinite alternate;  /* Chrome, Safari, Android, Blackberry */
    -moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
    -o-animation: fadein 8s infinite alternate; /* Opera 12 */
    animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
@-webkit-keyframes fadein { 50% { opacity: 1; } }
@-moz-keyframes fadein { 50% { opacity: 1; } }
@-o-keyframes fadein { 50% { opacity: 1; } }
@keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */