SVG动画rotate（）在Firefox上无法正常工作

Question

所以我正在研究一个使用CSS转换的简单秒表的SVG动画：rotate（），它可以在像chrome和safari这样的webkit浏览器上完美运行。然而在Firefox上它的表现完全不同，我试图制作动画的秒针飞离它的轴。我在这里创建了一个codepen。

#stopwatch {
 position: relative;
}
.stopwatch-st0{fill:#E65E39;}
.stopwatch-st1{fill-rule:evenodd;clip-rule:evenodd;fill:#34312D;}
.stopwatch-st2{fill:#34312D;}
#stopwatch:hover #second-hand {
    -webkit-animation: secondAnimate 1s ease;
    animation: secondAnimate1 1s ease;
}
#second-hand {
    --webkit-transform-origin: 12% 78%;
    transform-origin: 12% 78%;
    /*transform: rotate(-55deg);*/
    -webkit-animation: secondAnimate 1s ease;
          animation: secondAnimate 1s ease;
}
@-webkit-keyframes secondAnimate {
  0% {
    -webkit-transform: rotate(-55deg);
            transform: rotate(-55deg);
  }

  100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
  }
}

@keyframes secondAnimate1 {
  0% {
    -webkit-transform: rotate(-55deg);
            transform: rotate(-55deg);
  }
  100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
  }
}

http://codepen.io/timherbert/pen/bBXaMW