在less中写css3动画不生效问题

在react项目中，因为有用到css动画效果给一个图片无限旋转360度，代码如下：

@keyframes rotatecm{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@-webkit-keyframes rotatecm{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.s-rotate {
  animation: rotatecm 3s linear infinite;
  -webkit-animation: rotatecm 3s linear infinite;
  -moz-animation: rotatecm 3s linear infinite;
  -o-animation: rotatecm 3s linear infinite;
}

页面已经展示出s-rotate这个类的代码但是动画就是不执行，排查了半天定位到是不是less的问题，因为自己有测试在w3school里动画是可以生效的；看了下页面源码，研究了一下发现是因为我配置了css module的原因，动画名被hash了但是引用却没有引用已被hash的动画名，修改一下代码：

:global(.s-rotate){
  @name: ~`'rotatecm'`;
    @keyframes @name{
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    @-webkit-keyframes @name{
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    animation: @name 3s linear infinite;
    -webkit-animation: @name 3s linear infinite;
    -moz-animation: @name 3s linear infinite;
    -o-animation: @name 3s linear infinite;
}