奇怪的 SVG 动画行为

Question

我的 SVG 动画效果完美……除了 SVG 中的最后一个元素。现在这会破坏整个动画。

我所拥有的是一个由 6 个单独的三角形组成的六边形，然后对其进行动画处理以折叠起来，然后在循环中折叠起来用作加载器动画。 Here is the JSBin

动画利用 SVG Groups 允许它堆叠 css Transform 旋转，所以我可以将三角形旋转成六边形，然后以 3D 旋转它们以展开它们，最后翻转它们以便播放相同的动画来折叠它们回来了。

这一切都很完美，但是最后一个元素出现故障并且位置错误，我不知道为什么，这与翻转三角形以启用折叠的旋转有关。如果将 hexagon-flip-triangles 关键帧中的百分比更改为 59.99% 和 60%，它的行为会有所不同；最后一个三角形以原始方式折叠，（即它没有被翻转）。

Answer 1

我修复了它，我只是延迟了旋转三角形以折回的动画，其延迟量与每个三角形的主动画延迟 (0.33*$i+s) 的量相同。 Here's the fixed Version.