排序CSS关键帧动画不起作用

Question

我正在测试一些具有delay属性的CSS动画的序列。 它似乎不起作用。 延迟不匹配。 我不确定自己可能做错了什么。 有人可以帮忙吗？

这是我的代码笔： http : //codepen.io/marineb/pen/RramrJ?editors=110 。 （此代码笔已用解决方案B更新）。

我正在Chrome浏览器中对此进行测试。

谢谢！

    .oo {
  width: 100%;
  text-align: center;
  height: 200px;
}

.logo {
  -webkit-animation-name: logo;
  -webkit-animation-duration: .5s;
}

.o--2 {
  background: pink;
  -webkit-animation-name: oo-2;
  -webkit-animation-delay: 3s;
  -webkit-animation-duration: .5s;
}

.o--3 {
  background: yellow;
  -webkit-animation-name: oo-2;
  -webkit-animation-delay: 7s;
  -webkit-animation-duration: .5s;
}

.o--4 {
  background: green;
  -webkit-animation-name: oo-2;
  -webkit-animation-delay: 10s;
  -webkit-animation-duration: .5s;
}

@keyframes logo {
  0% {
    margin-top: 5270px;
  }
  10% {
    margin-top: 5270px;
  }
  100% {
    margin-top: 0;
  }
}

@keyframes oo-2 {
  0% {
    margin-top: 5270px;
  }
  60% {
    margin-top: 5270px;
    opacity: 0;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}

Answer 1

如果我了解您要实现的目标，那么您希望每个部分从底部开始。

您得到一个奇怪的结果，因为在动画运行之前，每个部分都没有边距。 然后，在延迟用完后，立即为它提供一个较大的边距（它会跳下页面），然后动画使边距缩小。

为了达到理想的效果，您有两种选择。

A）在班级上定义您的保证金，这样它就有很大的保证金。

B）使用：

-webkit-animation-fill-mode: both;

这有两件事。 它使动画开始前的属性（在您的情况下为0％）在动画开始之前且延迟仍在递减之前应用。 然后，还使动画结束后动画末尾的属性（100％）保持不变。 有关更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode 。

同样，如果您打算让这些部分淡入大约60％的标记，则需要将opacity：0添加到0％关键帧，或者需要将其添加到CSS类。 由于上述相同的原因。