translate3dでtransitionさせるとAndroidの標準ブラウザでアニメーション前の要素が残る

表題のとおりAndorid4.4の標準ブラウザにて起こった現象です。
ハンバーガーメニューでのアニメーションなのですが、以下のようにtranslate3dを使うと、

.humbarger {
  background-color: $white;
  &.humbarger__1 {
    transform: rotate(-45deg) translate3d(-7px, 6px, 0);
  }
  &.humbarger__2 {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }
  &.humbarger__3 {
     transform: rotate(45deg) translate3d(-8px, -7px, 0);
  }
}

このように、closeに変形するが、変形前の３本線も残る。。

以下のようにtranslateだとアニメーションしました

.humbarger {
  background-color: $white;
  &.humbarger__1 {
    transform: rotate(-45deg) translate(-7px, 6px);
  }
  &.humbarger__2 {
    opacity: 0;
    transform: translate(20px, 0);
  }
  &.humbarger__3 {
     transform: rotate(45deg) translate(-8px, -7px);
  }
}