javascript - animation chrome bug ?-PHP中文网问答

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

<p class='slide-show'>
    <p class='single-slide'>
        <img src='http://res2.windows.microsoft.com/resbox/en/windows/main/b865a018-7479-47d2-b80c-2ec8fd85c0c8_4.jpg' alt=''>
        <p class='content'>
            <p class='title'>Lorem ipsum</p>
            <p 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.</p>
        </p>
    </p>
    <p class='single-slide'>
        <img src='http://res1.windows.microsoft.com/resbox/en/windows/main/1a212f38-ae12-4052-b462-d452be7f7de9_4.jpg' alt=''>
        <p class='content'>
            <p class='title'>Vestibulum porta neque</p>
            <p 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.</p>
        </p>
    </p>
    <p class='single-slide'>
        <img src='http://res2.windows.microsoft.com/resbox/en/windows/main/d47c2741-a8d8-4d78-888b-93b54e6d0be2_4.jpg' alt=''>
        <p class='content'>
            <p class='title'>Pellentesque habitant</p>
            <p 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. </p>
        </p>
    </p>
    <p class='single-slide'>
        <img src='http://res1.windows.microsoft.com/resbox/en/windows/main/6393c5ce-2ac6-4480-9446-7cb3c5aaafff_4.jpg' alt=''>
        <p class='content'>
            <p class='title'>Phasellus ac aliquam lectus</p>
            <p 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.</p>
        </p>
    </p>
    <p class='single-slide'>
        <img src='http://res1.windows.microsoft.com/resbox/en/windows/main/d85b86ab-92ad-4615-97e7-10836d36c350_4.jpg' alt=''>
        <p class='content'>
            <p class='title'>Aliquam eget lorem</p>
            <p 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. </p>
        </p>
    </p>
</p>

/* 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;
  }
}