CSS Preloader在IE11上无法顺利运行

Question

我在codepen.io上看到了这个预加载器，并且可以在IE11之外的其他浏览器上顺利运行... :(我需要在IE11上进行此工作。我是否需要添加任何内容以使其在IE11上平稳运行？

body{background:#ECF0F1}

.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;

}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{
      transform:translate(0);
      -webkit-transform:translate(0);
    }
  25%{
      transform:translate(160%);
      -webkit-transform:translate(160%);
    }
  50%{
      transform:translate(160%, 160%);
      -webkit-transform:translate(160%, 160%);
    }
  75%{
      transform:translate(0, 160%);
      -webkit-transform:translate(0, 160%);
    }
}

<div class="load" >
  <hr/><hr/><hr/><hr/>
</div>