Странное поведение анимации 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.