이상한 SVG 애니메이션 동작

Question

SVG의 마지막 요소를 제외하고 SVG가 완벽하게 애니메이션되었습니다. 이제 전체 애니메이션이 망가졌습니다.

저는 6 개의 개별 삼각형으로 이루어진 육각형입니다.이 육각형은 펼쳐 지도록 애니메이션이 적용된 다음 루프에서 다시 접어 로더 애니메이션으로 사용됩니다. Here is the JSBin

애니메이션은 SVG 그룹을 사용하여 CSS 변환 회전을 쌓을 수 있도록 삼각형을 육각형으로 회전시킨 다음 3D로 회전하여 펼치고 전개하여 같은 애니메이션을 재생할 수 있도록합니다.

이 모든 것이 완벽하게 작동하지만 마지막 요소가 잘못되어 잘못된 위치에있는 이유는 무엇입니까? 회전 할 때 삼각형을 뒤집어 접을 수있는 이유가 무엇인지 알 수 없습니다. 육각형 - 플립 삼각형 키 프레임에서 백분율을 59.99 %와 60 %로 변경하면 다르게 동작합니다. 마지막 삼각형은 원래 방식으로 접혀 있습니다 (즉, 뒤집혀지지 않음).

Answer 1

고정 시켰습니다. 각 삼각형의 주 애니메이션이 (0.33 * $ i + s)만큼 지연되는 같은 양만큼 삼각형을 회전시키는 애니메이션을 지연 시켰습니다. Here's the fixed Version.