html - Chrome 动画错误？

Question

JSFiddle .

这是 HTML:

<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>

这是CSS:

.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;
    }
}

该代码在 Firefox(Ubuntu 14.04 LTS 64 位上的版本 42.0)中运行良好，但在 Chrome(版本 47.0.2526.73(64 位))中看起来很奇怪。动画只循环一次(10 秒)，然后消失。当我将鼠标悬停在它上面时，它会再次出现，然后在 2 秒后再次消失。

如何修复我的代码？

Answer 1

此问题与 mix-blend-mode 属性有关。似乎 Chrome 并不完全喜欢它，并且在处理它时失败(可能是错误？)(即使根据 caniuse.com Chrome 支持它)。

如果删除它，动画在 Chrome 和 Firefox 中都可以正常工作。您可以在此演示 (and on your JSFiddle) 中看到它:

/* 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;
  font-family: serif;
  font-size: 1.2em;
  width: 100%;
  padding: 0.5em 1em;
  /*mix-blend-mode: luminosity;*/
}

.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;
  }
}

<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>