Нужна помощь, чтобы закрыть мою коробку SVG Christmas с помощью CSS3 анимации и преобразования

Question

У меня есть следующее поле:

@keyframes closeLeft {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-251deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes closeRight {
  0% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(251deg);
  }
  100% {
    transform: skew(0deg);
  }
}


#arm-box-upcover-left {
  animation: closeLeft 3s linear infinite;
  transform-origin: 570px 623px;
}
#arm-box-upcover-right {
  animation: closeRight 3s linear infinite;
  transform-origin: 570px 623px;
}

<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
        <g id="arm-box">
          <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#07002C" points="537.21,626.07 553.15,615.79 535.62,611.12
    			  519.09,621.32 537.21,626.07 		"/>
          <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#7C0A67" points="519.47,620.96 520.23,639.55 537.88,644.29
            537.13,625.71 519.47,620.96 		"/>
          <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#07002C" points="536.69,625.78 537.92,644.25 553.97,633.84
            552.98,615.43 536.69,625.78 		"/>
          <polygon id="arm-box-upcover-right" fill-rule="evenodd" clip-rule="evenodd" fill="#7C0A67" points="551.74,617.11 552.1,599.36 534.57,594.68
            533.62,612.36 551.74,617.11 		"/>
          <polygon id="arm-box-upcover-left" fill-rule="evenodd" clip-rule="evenodd" fill="#B21255" points="537.09,626.3 526.49,612.56 508.96,607.88
      			518.97,621.56 537.09,626.3 		"/>
        </g>
    </svg>

Я хочу иметь возможность закрыть его.Я играл с skew и transform-origin, но мне не удалось его полностью закрыть и открыть.

Знаете ли вы, какое преобразование мне нужно применить, чтобы закрыть мой ящик?