依次淡入和淡出 3 个 div答案

【问题标题】：Fade 3 divs in and out sequentially依次淡入和淡出 3 个 div
【发布时间】：2014-12-17 03:27:43
【问题描述】：

我正在尝试一次为 3 个 div 设置动画以淡入和淡出。我希望第一个淡入，暂停 2 秒然后淡出。然后第二个应该淡入，暂停 2 秒然后淡出，然后第三个 div 做同样的事情。现在动画不起作用，div 根本没有淡入。下面是用于动画的 html 和 css。

<div class="fave-animate rag-and-bone-container">
  <img class="rag-and-bone" src="/assets/images/rag-and-bone-boot.png"></img>
  <div class="title">
    <strong translate>Rag & Bone</strong>
    <span translate>just for you.</span>
  </div>
</div>
<div class="fave-animate asos-container">
  <img class="asos" src="/assets/images/asos.png"></img>
  <div class="title asos">
    <strong translate>Asos</strong>
    <span translate>just for you.</span>
  </div>
</div>
<div class="fave-animate style-container">
  <img class="style-inspiration" src="/assets/images/style-inspiration.png"></img>
  <div class="title style">
    <strong translate>Style inspiration</strong>
    <span translate>just for you.</span>
  </div>
</div>


.fave-content {
  width: 100%;
  height: 544px;
  opacity: 0;

  .fave-animate {
    -webkit-animation-name: demo;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    -webkit-animation-direction: alternate;

    &.rag-and-bone-container {
      -webkit-animation-delay: 0;
    }

    &.asos-container {
      -webkit-animation-delay: 5s;
    }

    &.style-container {
      -webkit-animation-delay: 10s;
    }
  }

  @-webkit-keyframes demo {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

【问题讨论】：

在我看来，你最好使用 JQuery，你的 CSS 是非常特定于浏览器的，并且支持有限。
我可以将它扩展到其他浏览器我只需要首先弄清楚如何使褪色工作
它在 chrome 中消失了......但时间是棘手的部分

标签： html css animation sass

【解决方案1】：

您的动画序列不符合要求。

这应该在 10 秒内发生

 @-webkit-keyframes demo {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

这里没有暂停..一旦序列达到 50%，它立即开始工作回到 0 不透明度。所以实际的顺序应该是这样的......

 @-webkit-keyframes demo {
    0% {
      opacity: 0; /* take 4 seconds */
    }

    40% {
      opacity: 1; /* pauses for 2 seconds (20% of 10 seconds) */
    }

    60% {
      opacity: 1; /* still at full opacity but now resumes taking another 4 second */
    }

    100% {
      opacity: 0;
    }
  }

你也可以去掉计时功能。

【讨论】：

这更有意义，但我看到的唯一动画仍然是所有 3 个 div 一次闪烁并且不褪色
请参阅 - jsfiddle.net/xy0s9xfu/6 在 Chrome 中...根据需要添加前缀。它并不完美，但它会让你更接近。
是的，这几乎正是我想要的，我想我的要求不清楚，但是一旦一个 div 淡出，它不应该随着下一个淡入淡出。它应该一次淡入一个。
现在更新了之前的评论。时机总是很困难，因为过渡总是重叠的。事实上，你所追求的是一个 30 秒的动画（3*10 秒）而不是 10 秒......一切都需要相应地调整。

【解决方案2】：

使用 & you where 告诉 css reg 和 asos 不是 fave 的孩子，但它们是 fave。

这里是在这样一个动画中表现的三个 div 的示例，你应该能够从这里处理它。

http://jsfiddle.net/qdnsz1p8/1/

.fave-animate {
background:red;
padding:60px;
margin-right:10px;
width:40px; 
float:left;
-webkit-animation: demo ease-in-out 5s infinite;
}

div.rag-and-bone-container {
  -webkit-animation-delay: 0;
}

div.asos-container {
  -webkit-animation-delay: 5s;
}

div.style-container {
  -webkit-animation-delay: 10s;
}

@-webkit-keyframes demo {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

【讨论】：