CSS动画微调器在IE Edge中被破坏，但在Firefox和Chrome上运行顺畅

Question

我有以下HTML和CSS代码：

＆＃13;

＆＃13;

RM

＆＃13;

.spinner-container {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  z-index: 2;
}

.spinner-container .path {
  stroke-dasharray: 1,150; 
  stroke-dashoffset: 0;
  stroke: rgba(27, 154, 89, 0.7);
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
}


@keyframes rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1,150;  
    stroke-dashoffset: 0;
  }
  
  50% {
    stroke-dasharray: 90,150; 
    stroke-dashoffset: -35;   
  }
  
  100% {
    stroke-dasharray: 90,150; 
    stroke-dashoffset: -124;  
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,150;  
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90,150; 
    stroke-dashoffset: -35;   
  }
  
  100% {
    stroke-dasharray: 90,150; 
    stroke-dashoffset: -124;  
  }
}

＆＃13;

＆＃13;

＆＃13;

如果在IE Edge中运行它，您将看到动画被中断。怎么修好？