CSS动画取消svg上的其他样式

我正在尝试翻转svg箭头并设置其动画。翻转转换有效。动画（来自animate.css）工作正常。但当我将两者结合起来时，动画似乎抵消了翻转变换

我已将相关代码包含在此代码笔中：

默认情况下，svg箭头指向右侧。我想让它指向左边，同时摇晃

HTML:

谢谢

---

James

任何单个元素只能应用一个特定类型的css属性。任何单个元素只能应用一个特定类型的css属性。

<svg class="flipLeft animated shake" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>

.flipLeft {
   -moz-transform: scaleX(-1) !important;
  -o-transform: scaleX(-1) !important;
  -webkit-transform: scaleX(-1) !important;
  transform: scaleX(-1) !important;
  filter: FlipH !important;
  -ms-filter: "FlipH" !important;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}