链关键帧动画

Question

您好，我正在尝试链接两个动画。 现在发生的情况是，在 moveUp 完成后，我的三角形跳回原位，然后开始 scaleDown。为什么当我指定 forwards 参数时三角形会跳回来，该参数告诉它应该在最后一个关键帧选项处停止。 我不知道这里出了什么问题。

#bottom-rect {
  animation: moveUp 2s forwards, scaleDown 1s 1s forwards;
}

@keyframes moveUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25%);
  }
}

@keyframes scaleDown {
  0% {
    transform: scaleY(1);
    transform-origin: center;
    transform-box: fill-box;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center;
    transform-box: fill-box;
  }
}

<svg width="135" height="216" viewBox="0 0 135 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg">
<path id="bottom-rect" d="M81.2 216V189L54 216H81.2Z" fill="black"/>
<path id="top-rect" d="M54.2 0V27L81 0H54.2Z" fill="black"/>
<path id="Vector" d="M0 162H36L135 54H99L0 162Z" fill="black"/>
</g>
</svg>

我需要达到的效果基本上是这样的：0sec（moveUp开始）->1sec（scaleDown开始）->2s都完成了。

Answer 1

实际上可以在CSS 中制作附加动画。在这种情况下，您只需在 path 标记周围添加一个元素。因此，对于 svg，我们可以添加一个额外的 g 标签，我将在示例中将其命名为 animation2。

#bottom-rect {
  animation: scaleDown 1s 1s forwards;
}
#animation2{
  animation: moveUp 2s forwards;
}

@keyframes moveUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25%);
  }
}

@keyframes scaleDown {
  0% {
    transform: scaleY(1);
    transform-origin: center;
    transform-box: fill-box;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center;
    transform-box: fill-box;
  }
}

<svg width="135" height="216" viewBox="0 0 135 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg">
<g id = "animation2">
  <path id="bottom-rect" d="M81.2 216V189L54 216H81.2Z" fill="black"/>
</g>
<path id="top-rect" d="M54.2 0V27L81 0H54.2Z" fill="black"/>
<path id="Vector" d="M0 162H36L135 54H99L0 162Z" fill="black"/>
</g>
</svg>