My SVG animation was going smoothly until the final element, which unfortunately ruins the entire thing.
What I've created is a hexagon composed of 6 individual triangles, designed to fold out and back in on a continuous loop for use as a loader animation. You can view it in action on JSBin.
The animation makes use of SVG Groups to stack css Transform rotations, allowing me to rotate the triangles into a Hexagon shape, then unfold them in 3D, before flipping them to play the animation in reverse.
Everything works perfectly except for the last element, which glitches and ends up in the wrong position. I'm struggling to figure out why this happens; it seems to be related to the rotation required to flip the triangles for folding back. If you adjust the percentages in the hexagon-flip-triangles keyframes to 59.99% and 60%, the behavior changes - the last triangle folds in its original direction instead of being flipped.