具有翻译的CSS动画在Internet Explorer中不起作用

Question

我有一个简单的SVG动画，由三个圆圈组成，通过translateY变换“跳跃”。它适用于Firefox和Chrome，但不适用于IE11。我通过前缀运行代码，所以我不认为这是一个问题，但我无法弄清楚出了什么问题。

https://jsfiddle.net/cuj06coe/

@-webkit-keyframes loading-circles-jump {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  33% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    opacity: .4;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes loading-circles-jump {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  33% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    opacity: .4;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.loading-circles {
  height: 10px;
  width: 25px;
}

.loading-circles circle {
  fill: @UserImgBackgroundColor;
}

.loading-circles .loading-circle-1 {
  -webkit-animation: loading-circles-jump 1s ease infinite;
  animation: loading-circles-jump 1s ease infinite;
}

.loading-circles .loading-circle-2 {
  -webkit-animation: loading-circles-jump 1s .3s ease infinite;
  animation: loading-circles-jump 1s .3s ease infinite;
}

.loading-circles .loading-circle-3 {
  -webkit-animation: loading-circles-jump 1s .6s ease infinite;
  animation: loading-circles-jump 1s .6s ease infinite;
}

<svg class="loading-circles" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50">
  <circle class="loading-circle-1" cx="25" cy="25" r="25" />
  <circle class="loading-circle-2" cx="95" cy="25" r="25" />
  <circle class="loading-circle-3" cx="165" cy="25" r="25" />    
</svg>