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

#stapel {
    position: relative;
    height: 23em;
    width: 31.25em;
    margin: 3em auto;
    cursor: pointer;
    perspective: 1500px;
    transform-style: preserve-3d;
}

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

#stapel figure {
    position: absolute;
    margin: 0;
    height: 20.8em;
    width: 31.25em;
    opacity: 0;
}

#stapel figcaption {
    position: relative;
    overflow: hidden;
    color: #fff;
    font: 1.1em/2.5 Verdana, Arial, serif;
    letter-spacing: .1em;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
    bottom: 43px;
    opacity: 0;
    transition: 1s;
}

#stapel figcaption:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .1em;
    background: #fff;
    content: '';
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

#stapel:hover figcaption,
#stapel:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}

#stapel figure:nth-of-type(1) {
    animation: bild 30s ease-in-out infinite;
}

#stapel figure:nth-of-type(2) {
    animation: bild 30s 6s ease-in-out infinite;
}

#stapel figure:nth-of-type(3) {
    animation: bild 30s 12s ease-in-out infinite;
}

#stapel figure:nth-of-type(4) {
    animation: bild 30s 18s ease-in-out infinite;
}

#stapel figure:nth-of-type(5) {
    animation: bild 30s 24s ease-in-out infinite;
}

@keyframes bild {
     6.66%       {opacity:1; z-index:3;
                  transform:rotateY(0deg) translateZ(253px);}
    20%          {opacity:1; z-index:4;
                  transform:rotateY(0deg) translateZ(253px);}
    26.66%       {opacity:1; z-index:2;
                  transform:rotateY(-90deg) translateZ(250px);}
    26.67%, 100% {opacity:0; z-index:1;
                  transform:rotateY(90deg) translateZ(250px);}
    0%           {opacity:1; z-index:1;
                  transform:rotateY(90deg) translateZ(261px);}
}