在一段时间内加快css关键帧动画

Question

我有一个关键帧无限循环，它旋转一个圆圈，看起来像一个加载元素。我的目标是两件事：

1. 将动画设置为最后X秒和

2. 提高圆圈越接近X

   的速度

     <style>
     @keyframes spinner {
         to {transform: rotate(360deg);}
     }
   
     @-webkit-keyframes spinner {
         to {-webkit-transform: rotate(360deg);}
     }
   
     .spinner {
         min-width: 30px;
         min-height: 30px;
     }
   
     .spinner:before {
         content: 'Loading…';
         position: absolute;
         top: 50%;
         left: 50%;
         width: 24px;
         height: 24px;
         margin-top: -13px;
         margin-left: -13px;
     }
   
     .spinner:not(:required):before {
         content: '';
         border-radius: 50%;
         border: 1px solid #ccc;
         border-top-color: red;
         animation: spinner .6s linear infinite;
         -webkit-animation: spinner .6s linear infinite;
     }
     </style>
   
     <div class="spinner"></div>
   

JSfiddle：https://jsfiddle.net/cLq2v72o/