<div id="stapel1">
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Cottage.jpg" width="210"
             height="160" alt="Kleines Cottage">
        <figcaption>Kleines Cottage mit Reetdach</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Runch.jpg" width="210"
             height="160" alt="Weiler Runch">
        <figcaption>Der Weiler Runch</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Gerfalke.jpg" width="210"
             height="160" alt="Gerfalke">
        <figcaption>Gerfalke</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Wollkopfgeier.jpg" width="210"
             height="160" alt="Wollkopfgeier">
        <figcaption>Wollkopfgeier</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Lobiser-Schupfen.jpg" width="210"
             height="160" alt="Lobiser-Schupfen">
        <figcaption>Lobiser-Schupfen</figcaption>
    </figure>
   <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Cottage.jpg" width="210"
             height="160" alt="Kleines Cottage">
        <figcaption>Kleines Cottage mit Reetdach</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Runch.jpg" width="210"
             height="160" alt="Weiler Runch">
        <figcaption>Der Weiler Runch</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Gerfalke.jpg" width="210"
             height="160" alt="Gerfalke">
        <figcaption>Gerfalke</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder500/Wollkopfgeier.jpg" width="210"
             height="160" alt="Wollkopfgeier">
        <figcaption>Wollkopfgeier</figcaption>
    </figure>
    <div class="pause"></div>
</div>

#stapel1 {
    position: relative;
    height: 20em;
    width: 44.5em;
    margin: 1em -1em;
    cursor: pointer;
    perspective: 1000px;
    transform-style: preserve-3d;
    background: #aaa;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#stapel1 img {
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#stapel1 figure {
    position: absolute;
    margin: 0;
    width: 13.75em;
    height: 9.375em;
    left: 15.4em;
    top: 5em;
    opacity: 0;
}

#stapel1 figcaption {
    position: absolute;
    color: #444;
    font-size: .7em;
    letter-spacing: .1em;
    word-spacing: .1em;
    text-align: center;
    line-height: 1.25em;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    box-shadow: 1px 1px 5px 2px #777;
    width: 18.5em;
    height: 1.25em;
    top: 155px;
    left: 5px;
    opacity: 0;
    transition: 1s;
}

#stapel1:hover figcaption {
    opacity: 1;
}

#stapel1 figure:nth-of-type(1) {
    animation: bild1 36s linear infinite;
}

#stapel1 figure:nth-of-type(2) {
    animation: bild1 36s 4s linear infinite;
}

#stapel1 figure:nth-of-type(3) {
    animation: bild1 36s 8s linear infinite;
}

#stapel1 figure:nth-of-type(4) {
    animation: bild1 36s 12s linear infinite;
}

#stapel1 figure:nth-of-type(5) {
    animation: bild1 36s 16s linear infinite;
}

#stapel1 figure:nth-of-type(6) {
    animation: bild1 36s 20s linear infinite;
}

#stapel1 figure:nth-of-type(7) {
    animation: bild1 36s 24s linear infinite;
}

#stapel1 figure:nth-of-type(8) {
    animation: bild1 36s 28s linear infinite;
}

#stapel1 figure:nth-of-type(9) {
    animation: bild1 36s 32s linear infinite;
}

@keyframes bild1 {
      0%    {opacity:  1; z-index:5;
             transform:rotateY(0deg) translateZ(315px);}
     11.11% {opacity: .9; z-index:4;
             transform:rotateY(40deg) translateZ(315px);}
     22.22% {opacity: .7; z-index:3;
             transform:rotateY(80deg) translateZ(315px);}
     33.33% {opacity: .5; z-index:2;
             transform:rotateY(120deg) translateZ(315px);}
     44.44% {opacity: .3; z-index:1;
             transform:rotateY(160deg) translateZ(315px);}
     55.56% {opacity: .3; z-index:1;
             transform:rotateY(200deg) translateZ(315px);}
     66.67% {opacity: .5; z-index:2;
             transform:rotateY(240deg) translateZ(315px);}
     77.78% {opacity: .7; z-index:3;
             transform:rotateY(280deg) translateZ(315px);}
     88.89% {opacity: .9; z-index:4;
             transform:rotateY(320deg) translateZ(315px);}
    100%    {opacity:  1; z-index:5;
             transform:rotateY(360deg) translateZ(315px);}
}

#stapel1:hover figure {
    animation-play-state: paused;
}