Question

我有一个交叉渐变动画来显示3个步骤的内容。我怎么能这样做，以便它在第三个之后结束？所以没有更多的交叉淡化。

我把它分成了nth-child（），

这是我的CSS代码：

.animation {
  -moz-animation: imageAnimation 30s linear 0s;
  -ms-animation: imageAnimation 30s linear 0s;
  -o-animation: imageAnimation 30s linear 0s;
  -webkit-animation: imageAnimation 30s linear 0s;
  -webkit-backface-visibility: hidden;
  animation: imageAnimation 30s linear 0s;
  color: black;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.animation:nth-child(2) {
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  -o-animation-delay: 6s;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
.animation:nth-child(3) {
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  -o-animation-delay: 12s;
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -moz-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -o-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes imageAnimation {
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -ms-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

HTML

<div class="box">
  <div class="animation">
    <h4>Hello-1</h4>
  </div>
  <div class="animation">
    <h4>Hello-2</h4>
  </div>
  <div class="animation">
    <h4>Hello-3</h4>
  </div>
</div>

Answer 1

如果你结束＆＃34;结束＆＃34;意味着第3个孩子没有消失，你需要声明你用于第3个孩子的新动画@keyframes声明，因此它不会以100%结束（opacity:0）。

修改这就是新关键帧定义的样子：

＆＃13;
＆＃13;
@keyframes imageAnimationStop { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 100% { opacity: 1 } }
＆＃13;
＆＃13;
＆＃13;

这表示结束状态（100%）应该有opacity: 1，因此它仍然可见。我也分叉你的codepen。这个新的关键帧不是浏览器前缀，但我想你可以做到这一点:)。然后你只需要为你的第三个孩子使用这个新的heyframes定义demo

在nth-child / CSS3结尾处停止动画

1 个答案: