添加@keyframes后CSS设置的Transform Rotate对id为arrow元素不生效如何解决

CSS动画关键帧中定义的transform属性会覆盖元素常规样式中声明的transform值。你在常规样式里给箭头设置了transform: rotate(180deg)，但动画两个关键帧的transform仅声明了缩放规则，默认覆盖了原本的旋转配置，所以旋转效果不生效。

方案1：在动画关键帧的transform中叠加旋转规则（最简便） #

transform属性支持同时配置多个变换规则，只需要给所有关键帧的transform都加上rotate(180deg)即可，同时同步修改-webkit-transform的配置：

@keyframes arrow {
    0% {
        transform: scale(.7) rotate(180deg);
        -webkit-transform: scale(.7) rotate(180deg);
    }
    100% {
        transform: scale(.8) rotate(180deg);
        -webkit-transform: scale(.8) rotate(180deg);
    }
}
/* 兼容webkit内核浏览器补充前缀动画 */
@-webkit-keyframes arrow {
    0% {
        -webkit-transform: scale(.7) rotate(180deg);
    }
    100% {
        -webkit-transform: scale(.8) rotate(180deg);
    }
}

方案2：拆分属性到父子元素 #

如果不想修改原有动画规则，可以给箭头套一层父容器，把旋转、定位等常规样式写在父容器上，动画仅作用在箭头元素本身：
修改后HTML：

<div class="front-container">
  <img class="village11" src="Village11Logo3tight.png" alt="logo">
  <h1 id="live-videos">Our Spotify</h1>
</div>
<div class="arrow-wrapper">
  <img id="arrow" src="60640.png">
</div>

修改后CSS：

/* 父容器承载定位、旋转属性 */
.arrow-wrapper {
  z-index: 1;
  position: absolute;
  bottom: 0;
  transform: rotate(180deg);
}
#arrow {
  color: white;
  display: block;
  border-radius: 50%;
  max-width: 100px;
  background-color: white;
  padding: 15px;
  border-style: solid;
  border-color: gray;
  border-width: 1px;
  animation: arrow .8s ease-in-out infinite alternate;
  -webkit-animation: arrow .8s ease-in-out infinite alternate;
}

@keyframes arrow {
    0% {
        transform: scale(.7);
        -webkit-transform: scale(.7);
    }
    100% {
        transform: scale(.8);
        -webkit-transform: scale(.8);
    }
}

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