我试图一次动画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;
}
}
答案 0 :(得分:0)
您的动画序列与要求不符。
这应该发生超过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;
}
}
您也可以删除计时功能。
答案 1 :(得分:0)
使用&amp;你在哪里告诉css reg和asos是他们不喜欢的孩子,他们很喜欢。
以下是在这种动画中表现出来的三个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;
}
}