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

Question

我正在测试几个 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) 在 class 上定义您的边距，以便它以巨大的边距开始。

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 class。出于与上述相同的原因。

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

Sequencing CSS keyframe animations not working

css

animation

keyframe

css-animations