使用CSS3播放动画幻灯片

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但无法正常工作。

Answer 1

您可以使用类似http://jsfiddle.net/qmhzs2kh/的内容

 * { margin: 0; padding: 0; } .pic-wrapper { position: absolute; width: 100%; height: 100%; overflow:hidden; } figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0; /*animation*/ animation: slideShow 24s linear infinite 0s; -o-animation: slideShow 24s linear infinite 0s; -moz-animation: slideShow 24s linear infinite 0s; -webkit-animation: slideShow 24s linear infinite 0s; } .pic-1 { opacity: 1; z-index:-1; background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-2 { animation-delay: 6s; -o-animation-delay: 6s; -moz--animation-delay: 6s; -webkit-animation-delay: 6s; background: url(http://www.musicmatters.ie/images/5.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-3 { animation-delay: 12s; -o-animation-delay: 12s; -moz--animation-delay: 12s; -webkit-animation-delay: 12s; background: url(http://www.musicmatters.ie/images/4.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-4 { animation-delay: 18s; -o-animation-delay: 18s; -moz--animation-delay: 18s; -webkit-animation-delay: 18s; background: url(http://www.musicmatters.ie/images/bara2.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* keyframes*/ @keyframes slideShow { 0% { opacity: 0; transform:scale(1); -ms-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; transform:scale(1.1); -ms-transform:scale(1.1); } 100% { opacity: 0; transform:scale(1); -ms-transformm:scale(1); } } @-o-keyframes slideShow { 0% { opacity: 0; -o-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -o-transform:scale(1.1); } 100% { opacity: 0; -o-transformm:scale(1); } } @-moz-keyframes slideShow { 0% { opacity: 0; -moz-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -moz-transform:scale(1.1); } 100% { opacity: 0; -moz-transformm:scale(1); } } @-webkit-keyframes slideShow { 0% { opacity: 0; -webkit-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -webkit-transform:scale(1.1); } 100% { opacity: 0; -webkit-transformm:scale(1); } }

 <div class="pic-wrapper"> <figure class="pic-1"></figure> <figure class="pic-2"></figure> <figure class="pic-3"></figure> <figure class="pic-4"></figure> </div>

使用CSS3播放动画幻灯片

问题描述

1 个解决方案

解决方案1
0 2015-08-24 10:32:05

使用CSS3播放动画幻灯片

问题描述

1 个解决方案

解决方案1 0 2015-08-24 10:32:05

解决方案1
0 2015-08-24 10:32:05