Question

我有一系列图片，如下图所示。我想使用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=""/>

Answer 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);
}

用于循环多个图像的CSS3关键帧动画

1 个答案: