奇怪的SVG动画行为

时间:2016-09-08 22:58:19

标签: html css animation svg

除了SVG中的最后一个元素外,我的SVG动画完美无缺。现在,它破坏了整个动画。

我所拥有的是由6个单独的三角形组成的六边形,然后将其折叠成动画,然后折回到循环中以用作加载器动画。 Here is the JSBin

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

这一切都很完美,但是最后一个元素出现故障并处于错误的位置,我无法弄清楚为什么,这与旋转三角形以实现折回有关。如果将六边形 - 翻转三角形关键帧中的百分比更改为59.99%和60%,则其行为会有所不同;最后一个三角形以原始方式折叠(即它没有被翻转)。

1 个答案:

答案 0 :(得分:1)

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