链接CSS3动画的bug

我试图将CSS3动画链接在一起，但它们有时表现得非常怪异。例如，在中，为什么最后一个动画不开始？我以前让它工作过，但现在不工作了，我使用了相同的设置。我在这里粘贴的代码有点简化，但动画完全相同：

HTML:

---

也许我错了。。。但这似乎并没有“连锁”它们，因为它们同时玩。如果是这种情况，那么最后一个可能不起作用，因为您已经在第二个动画中设置了关键帧

translateY

。

您是对的，您不能同时设置相同属性的动画。我正在链接它们，因为我正在使用

动画延迟

顺序播放它们。这有关系吗？事实上，你是对的，如果在最后一组关键帧中设置不同属性的动画，它会工作！

<div class="box"></div>

body {
  padding: 60px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: black;

  animation-name: fadeIn, fall, elastic;
  animation-timing-function: ease, ease-in, ease-out;
  animation-duration: 1s, 0.5s, 0.5s;
  animation-delay: 0s, 0s, 0.5s;
  animation-fill-mode: forwards, forwards, forwards;
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fall {
  0%   { transform: translateY(-100px); }
  100% { transform: translateY(0px); }
}

@keyframes elastic {
  0%   { transform: translateY(0px); }
  20%  { transform: translateY(60px); }
  40%  { transform: translateY(-20px); }
  60%  { transform: translateY(10px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}