animation chrome bug ?

我写了一个 CSS 图片播放器， 在火狐上好好的， 但在 chrome 上只循环了一次然后就不能正常显示了。求高手指点指点，我 google 到凌晨 4 点都没结果。谢谢你阅读我的问题！代码如下， 没有 JavaScript。

<div class='slide-show'>
    <div class='single-slide'>
        <img src='http://res2.windows.microsoft.com/resbox/en/windows/main/b865a018-7479-47d2-b80c-2ec8fd85c0c8_4.jpg' alt=''>
        <div class='content'>
            <div class='title'>Lorem ipsum</div>
            <div class='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam dolor, fermentum quis orci laoreet, efficitur sodales libero. Duis accumsan malesuada risus quis pretium.</div>
        </div>
    </div>
    <div class='single-slide'>
        <img src='http://res1.windows.microsoft.com/resbox/en/windows/main/1a212f38-ae12-4052-b462-d452be7f7de9_4.jpg' alt=''>
        <div class='content'>
            <div class='title'>Vestibulum porta neque</div>
            <div class='description'>Vestibulum porta neque dui, sed varius massa dignissim id. Vestibulum congue gravida urna ac egestas. Sed urna lectus, condimentum at nisi et, vestibulum porttitor enim. Morbi ex felis, malesuada quis eleifend sed, consequat in velit. Nunc lacinia nec erat ut efficitur.</div>
        </div>
    </div>
    <div class='single-slide'>
        <img src='http://res2.windows.microsoft.com/resbox/en/windows/main/d47c2741-a8d8-4d78-888b-93b54e6d0be2_4.jpg' alt=''>
        <div class='content'>
            <div class='title'>Pellentesque habitant</div>
            <div class='description'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nisi magna, vehicula nec velit vel, porttitor ullamcorper sem. Donec porttitor ipsum sit amet convallis ornare. Ut vitae eros ante. </div>
        </div>
    </div>
    <div class='single-slide'>
        <img src='http://res1.windows.microsoft.com/resbox/en/windows/main/6393c5ce-2ac6-4480-9446-7cb3c5aaafff_4.jpg' alt=''>
        <div class='content'>
            <div class='title'>Phasellus ac aliquam lectus</div>
            <div class='description'>Phasellus ac aliquam lectus, eget posuere odio. Morbi et mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        </div>
    </div>
    <div class='single-slide'>
        <img src='http://res1.windows.microsoft.com/resbox/en/windows/main/d85b86ab-92ad-4615-97e7-10836d36c350_4.jpg' alt=''>
        <div class='content'>
            <div class='title'>Aliquam eget lorem</div>
            <div class='description'>Aliquam eget lorem ac justo tempor tempor at ut dolor. Vivamus pharetra cursus ex nec rutrum. Ut euismod justo urna, id feugiat dui lobortis sagittis. </div>
        </div>
    </div>
</div>

/* no script fallback
** make the picture slide internally
** but the user can't control them
*/
.slide-show {
  position: relative;
  width: 480px;
  height: 300px;
}
.single-slide {
  position: absolute;
  width: 100%;
  height: 100%;
}

.single-slide img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.single-slide .title, .single-slide .description {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.6);
  color: black;
  mix-blend-mode: luminosity;
  font-family: serif;
  font-size: 1.2em;
  width: 100%;
  padding: 0.5em 1em;
}

.single-slide .description {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1em;
  transition: 0.2s linear;
  -webkit-transition:  0.2s linear;
  overflow: hidden;
}

.slide-show .content {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.slide-show:hover .description {
  height: auto;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.slide-show:hover .single-slide {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.slide-show .single-slide {
  animation: slideshow 10s infinite running;
  -webkit-animation: slideshow 10s infinite running;
}

.slide-show .single-slide:nth-child(1) {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
.slide-show .single-slide:nth-child(2) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}
.slide-show .single-slide:nth-child(3) {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.slide-show .single-slide:nth-child(4) {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.slide-show .single-slide:nth-child(5) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

@keyframes slideshow {
  5%, 20% {
    opacity:1;
  }
  0%, 25%, 100% {
    opacity:0;
  }
}
@-webkit-keyframes slideshow {
  5%, 20% {
    opacity:1;
  }
  0%, 25%, 100% {
    opacity:0;
  }
}