Question

我想创建一个幻灯片，我使用css3创建了3个不同的动画。我的问题是我无法无限重复这些动画。

我有3个动画（第3个动画位于第2个上方，位于第1个上方）。

<head>
    <link rel="stylesheet" type="text/css" href="slideshow.css">
</head>
<body">
  <div id="animation">
    <img id="background1" src = "images/image1.png"/>
    <img id="img2" src="images/image2.png"/>
    <img id="img3" src="images/image3.png"/>
  </div>

   <div id="animation2" style = "position:absolute; top:0px; bottom:0px;">
      <img id="background2" src ="images/image4.png"/>
      <img id="img5" src="images/image5.png"/>
      <img id="img6" src="images/image6.png"/>
    </div>

   <div id="animation3" style ="position:absolute; top:0px; bottom:0px;">
        <img id="background3" src = "images/image7.png"/>
        <img id="img8" src="images/image8.png"/>
   </div>
<body>

使用css3，我用上面的图像创建了一些动画（不提供动画代码，因为我不认为这与我的问题有关）。我现在想要的是创建一个幻灯片，使用永远不会结束的动画。

到目前为止我所拥有的是：

div#animation2 {
  width:1130px;
  height:222px;
  overflow:hidden;

  animation: slideshow1 20s;  
  animation-delay: 45s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

div#animation3 {
  width:1130px;
  height:222px;
  overflow:hidden;

  animation: slideshow2 20s;  
  animation-delay: 15s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}


@keyframes slideshow1 {
     0% {opacity: 1;} 5% {opacity: 0;} 100% { opacity: 0; }
}

@keyframes slideshow2 {
 0% {opacity: 1;} 5% {opacity: 0;} 100% { opacity: 0; }
}

总而言之，我希望animation3播放然后淡出，然后animation2播放然后淡出，animation1播放，然后动画3应该淡出 - 进，然后淡出等等。

现在我只有幻灯片的一次迭代，我希望有无限的迭代。

我尝试将animation-iteration-count:设置为infinite，但它无法正常运行。

使用CSS3

0 个答案: