用于循环通过多个图像的 CSS3 关键帧动画答案

【问题标题】：CSS3 Keyframes Animation for Cycling through Multiple Images用于循环通过多个图像的 CSS3 关键帧动画
【发布时间】：2015-10-23 03:29:00
【问题描述】：

我有一系列图片，如下所示。我想使用 CSS3 关键帧动画一遍又一遍地循环图像。我试图为每个将同时运行的图像定义具有不同的相应时间百分比的单独关键帧动画；但是，这似乎不起作用。有人可以帮我解决这个问题！谢谢。

<img src="bannerimages/e1.jpg" width="877" height="170" alt=""/> 
<img src="bannerimages/Banner-C.jpg" width="877" height="170" alt=""/>
<img src="bannerimages/bannerG.jpg" width="877" height="170" alt=""/>
<img src="bannerimages/Banner-B.jpg" width="877" height="170" alt=""/> 
<img src="bannerimages/f1.jpg" width="877" height="170" alt=""/>
<img src="bannerimages/bannerH.jpg" width="877" height="170" alt=""/>
<img src="bannerimages/Banner-D.jpg" width="877" height="170" alt=""/>
<img src="bannerimages/bannerI.jpg" width="877" height="170" alt=""/>

【问题讨论】：

那么你想要的是无限幻灯片？
看看这个小提琴：jsfiddle.net/yWVVX - 不需要 HTML...所有 CSS 定义。出于显而易见的原因，请使用 webkit 浏览器

标签： html css

【解决方案1】：

总结RizJa的回答。这是一个Fiddle，它演示了如何为背景图像设置动画，以便它们交替出现。第一个是按步骤进行的。另一个过渡平稳。

就像 RizJa 所说：不需要 HTML。只是 CSS。

注意，您应该将最后一张图片（在动画的 100% 处）设置为与第一张图片相同（在 0% 处）。如果您要循环浏览 8 张图片，这意味着您需要为每张图片设置 12.5% 的步长。

CSS

@-webkit-keyframes test{
    0%{
        background-image: url('path');
    }
    20%{
        background-image: url('path');
    }
    40%{
        background-image: url('path');
    }
    60%{
        background-image: url('path');
    }
    80%{
        background-image: url('path');
    }
    100%{
        background-image: url('path');
    }
}

div{
    width: 350px;
    height: 250px;
    float: left;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-animation: test 12s infinite;
            animation: test 12s infinite;
    -webkit-animation-timing-function: steps(1, end);
            animation-timing-function: steps(1, end);
}

【讨论】：