SASS动画(非SCSS)不工作

有一个代码:

   <div>
     <svg className="spinner" viewBox="0 0 100 100">
         <path d="M 2 50 A 48 48 0 0 0 98 50 L 2 50" className="-ring1" />
         <path d="M 98 50 A 48 48 0 0 0 2 50 L 98 50" className="-ring2"/>
         <circle fill="black" cx="50" cy="50" r="40" />
     </svg>
   </div>  

@keyframes spinner-loading
 0%
 transform: rotateZ(0deg)
 100%
 transform: rotateZ(359deg) 

.spinner
 margin-top: 20%
 margin-left: 30%
 height: 30%
 width: 30%
 animation: spinner-loading 1.5s linear infinite

.-ring1 
 fill: white

.-ring2 
 fill: rgba(white, 0.2)

@keyframes spinner-loading {
 0%{
 transform: rotateZ(0deg);
 }

 100%{
 transform: rotateZ(359deg);
  }
 }
.spinner {
  margin-top: 10%;
  margin-left: 30%;
  height: 30%;
  width: 30%;
  animation: spinner-loading 1.5s linear infinite;
 }

.-ring1 {
 fill: red;
}

.-ring2 {
 fill: rgba(255, 0, 0, 0.2);
}