How to overcome "keyframe rule ignored due to bad selector" warning caused by repeated CSS media feature?

I have a rotating logo on my website, and when triggered by addEventListener, this rotating logo class revolve is overruled to become class revolvefaster:

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

The code in itself, shown below, is working properly, however when the console is reviewed upon loading this page it shows a warning that the Keyframe rule is ignored due to a bad selector:

This seems to be caused by -webkit-transform CSS media feature being called upon two times for two different classes. How can this warning be resolved?

 .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);}
}