css - 链接 CSS3 动画的错误

Question

我正在尝试将 CSS3 动画链接在一起，但它们有时表现得很奇怪。例如，在 this pen 中，为什么最后一个动画不开始呢？我以前让它工作，但现在不工作了，我使用了相同的设置。我在此处粘贴的代码略有简化，但动画完全相同:

HTML:

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

CSS:

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); }
}

Answer 1

也许我错了...但这似乎并没有“链接”它们，因为它们是同时播放的。如果是这种情况，那么最后一个可能无法正常工作，因为您已经在第二个动画中设置了关键帧 translateY。