如何克服重复CSS媒体功能导致的“由于选择器错误而忽略关键帧规则”警告？

问：

我的网站上有一个旋转的标志，当被addEventListener触发时，这个旋转的标志类被否决为类：revolverevolvefaster

document.querySelector("#rotatorid").className='revolvefaster';

代码本身（如下所示）工作正常，但是，在加载此页面时查看控制台时，它会显示一条警告，指出由于选择器错误，关键帧规则被忽略：

这似乎是由于两个不同的类调用了两次 CSS 媒体功能造成的。如何解决此警告？-webkit-transform

 .revolve {
      width: auto;
      height: 200px;
      position: relative;
      -webkit-animation-name: wave; /* Chrome, Safari, Opera */
      -webkit-animation-duration: 20s; /* Chrome, Safari, Opera */
      -webkit-animation-iteration-count: 5; /* Chrome, Safari, Opera */
      -webkit-animation-direction: normal; /* Chrome, Safari, Opera */
      animation-name: wave;
      animation-duration: 100s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
  }
    @keyframes wave {
      100% {
      -ms-transform: rotate(360deg); /* IE 9 */
      -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
      transform: rotate(360deg);
      }
  }

  .revolvefaster {
    -webkit-animation: rotating 2.5s linear infinite;
}
@-webkit-keyframes rotating {
  from{-webkit-transform: rotate(0deg);}
  to{-webkit-transform: rotate(360deg);}
}