Css滑块关键帧结束循环显示空白页面

Question

我有一些问题的滑块，我使用CSS制作。我有两张图片，我正试着向左滑动。在第二个图像的末尾，它应该是第一个，但却显示空白幻灯片。我认为关键帧百分比有问题，还不确定吗？

如何计算2张滑动图像的关键帧？

<div id="captioned-gallery">
    <figure class="slider">
        <figure>
            <img src="http://example.com/wp-content/uploads/2015/10/cyprus-nicosia-2.jpg" alt>
            <figcaption>slider 1 caption</figcaption>
        </figure>

        <figure>
            <img src="http://example.com/wp-content/uploads/2015/10/nicosia.jpg" alt>
            <figcaption> slider 2 caption</figcaption>
        </figure>

    </figure>
</div>

和CSS

/* Frontpage Slider */

@keyframes slidy {
    0% {
        left: 0%;
    }
    50% {
        left: -100%;
    }
    75% {
        left: -200%;
    }
    100% {
        left: -200%;
    }
}

@-webkit-keyframes slidy {
    0% {
        left: 0%;
    }
    50% {
        left: -100%;
    }
    75% {
        left: -200%;
    }
    100% {
        left: -200%;
    }
}

figure {
    margin: 0;
    font-family: sans-serif;
    font-weight: 100;
}

div#captioned-gallery {
    width: 100%;
    overflow: hidden;
}

figure.slider {
    position: relative;
    width: 200%;
    font-size: 0;
    animation: 25s slidy infinite;
    -webkit-animation: 20s slidy infinite
}

figure.slider figure {
    width: 50%;
    height: auto;
    display: inline-block;
    position: inherit;
}

figure.slider img {
    width: 100%;
    height: auto;
}

figure.slider figure figcaption {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 75%;
    text-align: center;
    line-height: 160%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 3vw;
    padding: .6rem;
}

Answer 1

这里有很多问题，看看这里。

<div id="captioned-gallery">
<div class="slider">

http://codepen.io/damianocel/pen/PPEXgq

虽然我不能修复绝对定位的字幕，但我不知道为什么，但有点着急。如果有人能在这段时间内。

Answer 2

好吧，这段代码可以让我循环运行两张幻灯片。诀窍是放慢第二张幻灯片的过渡速度，这样当它完成时，就会循环到第一张幻灯片。

@keyframes slidy {
0% { left: 0%; }
50% { left: -100%; }
100% { left: -200%; }
}


@-webkit-keyframes slidy {
0% { left: 0%; }
50% { left: -100%; }
100% { left: -200%; }
}