CSS @keyframes平移动画下hover旋转180deg效果失效如何解决

问题原因 #

你的hover transform规则不生效，核心原因是运行中的CSS动画属性优先级高于普通选择器的属性规则，你的@keyframes全程都在定义transform属性，会持续覆盖hover状态下设置的transform值，即使给hover的transform加!important也无法生效，这是CSS优先级规则的既定表现。

解决方法 #

推荐以下两种无兼容性问题的方案：

• 方案1：拆分动画和翻转效果到不同元素（最通用）
  给需要动画的元素加一个父容器，水平移动动画绑定到父容器，翻转效果绑定到原元素，两者的transform不会互相冲突。
  修改后的代码如下：
  HTML代码：

  <div class="animation-wrapper">
    <div class="box" id="www">WWW</div>
  </div>
  

  CSS代码：

  /* 父容器负责水平往复移动 */
  .animation-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    animation: moveHorizontal 5s infinite;
  }
  /* 子元素负责样式和 hover 翻转 */
  #www{
    background-color: black;
    color: #fff;
    transition: transform 1s;
  }
  #www:hover{
    transform: rotate(180deg);
  }
  @keyframes moveHorizontal{
    0% {
      transform: translateX(0vw);
    }
    50% {
      transform: translateX(50vw);
    }
    100% {
      transform: translateX(0vw);
    }
  }
  

• 方案2：无需修改HTML结构，借助伪元素实现翻转
  将文字内容放在元素的伪元素中，hover时仅给伪元素添加翻转效果，主元素的动画不受影响：
  修改后的代码如下：
  HTML代码保持不变：

  <div class="box" id="www"></div>
  

  CSS代码：

  #www{
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    animation: www 5s infinite;
  }
  /* 伪元素承载文字和翻转效果 */
  #www::after {
    content: "WWW";
    color: #fff;
    display: block;
    transition: transform 1s;
  }
  #www:hover::after{
    transform: rotate(180deg);
  }
  @keyframes www{
    0% {
      transform: translateX(0vw);
    }
    50% {
      transform: translateX(50vw);
    }
    100% {
      transform: translateX(0vw);
    }
  }
  

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