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秒，以便它们按顺序出现。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;