除了 SVG 中的最后一个元素外，我的 SVG 动画效果非常完美。现在这毁了整个动画。
我有一个由 6 个单独的三 Angular 形组成的六边形，然后将其设置为展开动画，然后循环折回以用作加载器动画。 Here is the JSBin
动画利用 SVG Groups 允许它堆叠 css Transform 旋转，所以我可以将三 Angular 形旋转成六边形，然后在 3D 中旋转它们以展开它们，最后翻转它们以便可以播放相同的动画来折叠它们回来。
这一切都完美无缺，但最后一个元素出现故障并且位置错误，我不明白为什么，这与旋转翻转三 Angular 形以启用折叠有关。如果将六边形翻转三 Angular 形关键帧中的百分比更改为 59.99% 和 60%，它的行为会有所不同；最后一个三 Angular 形以原来的方式折叠(即它没有被翻转)。
最佳答案
我修复了它，我只是延迟了旋转三 Angular 形的动画以将每个三 Angular 形的主动画延迟相同的量(0.33*$i+s)。 Here's the fixed Version.
关于html - 奇怪的 SVG 动画行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39401363/