Básicamente, el problema aquí es cuando agregué el fotograma clave, el estilo de imagen normal no gira la flecha de mi ID. Queda como está cuando lo agregué. Alguna forma de hacer esto?

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