如何解决因重复CSS特性引发的‘关键帧规则因无效选择器被忽略’警告

问题背景 #

网站中的旋转Logo通过addEventListener触发后，类名从revolve替换为revolvefaster以实现加速旋转，代码功能正常，但页面加载时控制台弹出「关键帧规则因无效选择器被忽略」的警告，排查后怀疑是两个类重复调用-webkit-transform导致。

相关代码：

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

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

解决方案 #

警告的核心原因是关键帧的前缀写法不规范，以及部分关键帧缺少标准语法定义，导致浏览器解析时判定规则无效。按以下方式修改即可解决：

1. 统一关键帧的前缀与标准写法
   所有自定义关键帧需同时提供标准的@keyframes和对应前缀版本（如@-webkit-keyframes），避免仅存在前缀版本引发解析异常。

2. 简化冗余前缀与属性
   移除低使用率的浏览器前缀（如-ms-transform），同时统一动画属性的书写方式，减少属性冲突概率。

修改后的完整代码：

.revolve {
  width: auto;
  height: 200px;
  position: relative;
  /* 标准动画属性优先，兼容旧webkit内核浏览器保留前缀 */
  animation: wave 100s alternate infinite;
  -webkit-animation: wave 20s normal 5;
}

/* 同时定义标准与webkit前缀的wave关键帧 */
@keyframes wave {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes wave {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.revolvefaster {
  /* 统一标准与webkit前缀的动画写法 */
  animation: rotating 2.5s linear infinite;
  -webkit-animation: rotating 2.5s linear infinite;
}

/* 补充rotating的标准关键帧定义 */
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

3. 优化类名替换逻辑（可选）
   若Logo元素可能存在其他类名，建议使用classList.replace()替代直接赋值className，避免误删其他类：

document.querySelector("#rotatorid").classList.replace('revolve', 'revolvefaster');

内容的提问来源于stack exchange，提问作者Rivered