Chrome动画bug？

时间：2015-12-04 19:27:47

标签： html css css3 google-chrome

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位））中看起来很奇怪。动画只进行一次循环（10s），然后消失。当我将鼠标悬停在它上面时，它会再次显示，然后在2秒后再次消失。

如何修复我的代码？

2 个答案:

答案 0 :(得分：1)

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

如果您将其删除，动画在Chrome和Firefox中均可正常运行。您可以在此演示中看到它（and on your JSFiddle）：

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

答案 1 :(得分：0)

它缺少其他语法，如：

animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;

和

animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
-moz-animation: slideshow 10s infinite running;
-o-animation: slideshow 10s infinite running;
相关问题
最新问题