javascript - 添加关键帧时，Transform Rotate 在我的 CSS 上不起作用

Question

基本上这里的问题是当我添加关键帧时，常规图像样式不会旋转我的 ID 箭头。我添加它时它保持原样。有什么办法可以做到这一点？

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

#arrow {
  z-index: 1;
  color: white;
  position: absolute;
  display: block;
  border-radius: 50%;
  max-width: 100px;
  background-color: white;
  padding: 15px;
  border-style: solid;
  border-color: gray;
  border-width: 1px;
  bottom: 0;
  transform: rotate(180deg);
}


#arrow {
    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);
        }
    }

标签： javascripthtmlcss