Transform Rotate not working on my CSS when I added keyframes

Question

Basically the issue here is when I added the keyframe, the regular image styling doesn't rotate my ID arrow. It stays how it is when I added it. Any way to do this?

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