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进行了关键帧化。

带有CSS3动画链接的错误

1 个答案: