CSS圈旋转动画导致IE11浏览器中的摇晃（摇晃）

Question

图片：Spinner rotating along the border rim of other solid circle

访问https://codepen.io/bygrace1986/pen/wmyarb

HTML：

<div class="outer-circle">
<div class="spinner"></div>
</div>

CSS：

 .outer-circle{
      width:330px;
      height:330px;
      border:30px solid #001b33;
      position:absolute;
      top:0; bottom:0; left:0;right:0;
      margin:auto;
      border-radius:50%; 
    }

    .spinner {
        animation: rotate 4s linear infinite;
        border-radius: 50%;
        height: 360px;
        width: 360px;
        position: relative;
      left: -15px;
      top: -15px;
    }

    .spinner:before,
    .spinner:after {
        content: '';
        position: absolute;
    }

    .spinner:before {
        border-radius: 50%;
        background:
            linear-gradient(0deg,   hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 100%, 0.9) 100%)   0%   0%,
            linear-gradient(90deg,  hsla(0, 0%, 100%, 0.9)  0%, hsla(0, 0%, 100%, 0.6) 100%) 100%   0%,
            linear-gradient(180deg, hsla(0, 0%, 100%, 0.6)  0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
            linear-gradient(360deg, hsla(0, 0%, 100%, 0.3)  0%, hsla(0, 0%, 100%, 0  ) 100%)   0% 100%
        ;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        top: -1px;
        bottom: -1px;
        left: -1px;
        right: -1px;
    }

    .spinner:after {
        background: white;
      border: 15px solid #001b33;
        border-radius: 50%;
        top: 3%;
        bottom: 3%;
        left: 3%;
        right: 3%;
    }

    @keyframes rotate {
        from { transform: rotate(0deg);   }
        to   { transform: rotate(360deg); }
    }

内部微调器圈在IE 11浏览器中摇摆（摇动）。它在Google Chrome中完美运行。必须在IE浏览器中测试才能查看问题。在这里感谢任何建议/帮助............................................ .................................................. .................................................. ...........