SIMPLE – 按顺序为多个 SVG 制作动画（如循环 GIF）

Question

我正在尝试制作最基本的 SVG 动画，而我所发现的一切都是在尝试教我关键帧和类似的高级东西。我了解在 After Effects 中工作的关键帧，这根本不是我需要的。

我要做的就是按顺序为相同的 8 条 svg 路径设置动画，就像翻书一样，我可以在其中轻松地编辑循环速度。我希望图像改变颜色，所以我会重复使用不同颜色保存的相同的 8 个 SVG，或者也许有更好的方法可以用代码做到这一点，我不知道。我已经包含了一个示例 GIF，它展示了我正在寻找的确切效果。基本上我想以可扩展的 SVG 格式重新创建该 GIF。你看到的是 8 张独立的图纸。

我想在我的网站上显示这个动画作为主图形，所以它需要可扩展。

我需要尽快为我的投资组合审查进行此操作。

Answer 1

这是一个使用 CSS 为 8 个 SVG 帧设置动画的示例。

我们使组元素（即框架）可见 1/8 秒 (12.5%) 秒，然后使用 @keyframe 定义再次隐藏它。每个后续帧都将其动画延迟 0.125 秒，以便它们按顺序出现。

svg {
  width: 300px;
}

#frame1 {
  visibility: hidden;
  animation: 1s show infinite;
}

#frame2 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.125s;
}

#frame3 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.25s;
}

#frame4 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.375s;
}

#frame5 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.5s;
}

#frame6 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.625s;
}

#frame7 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.75s;
}

#frame8 {
  visibility: hidden;
  animation: 1s show infinite;
  animation-delay: 0.865s;
}

@keyframes show {
  0%   { visibility: visible;}
  12.5%  { visibility: visible; }
  12.6%  { visibility: hidden; }
  100% { visibility: hidden; }
}

<svg viewBox="0 0 300 300">
  <g id="frame1">
    <circle cx="150" cy="50" r="25"/>
  </g>
  <g id="frame2">
    <circle cx="250" cy="50" r="25"/>
  </g>
  <g id="frame3">
    <circle cx="250" cy="150" r="25"/>
  </g>
  <g id="frame4">
    <circle cx="250" cy="250" r="25"/>
  </g>
  <g id="frame5">
    <circle cx="150" cy="250" r="25"/>
  </g>
  <g id="frame6">
    <circle cx="50" cy="250" r="25"/>
  </g>
  <g id="frame7">
    <circle cx="50" cy="150" r="25"/>
  </g>
  <g id="frame8">
    <circle cx="50" cy="50" r="25"/>
  </g>
</svg>