vertikale Ausrichtung und Animation

Question

Ich arbeite an einer Musikbibliothek und ich habe ein Problem mit meiner vertikalen Ausrichtung und Animation.

Ich habe diesen HTML Code:

<div id="player"> 
    <div class="player-disc"></div> 
</div> 

und diese CSS für sie:

@keyframes spin { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 

#player { 
    position:relative; 
    margin: 30px auto; 
    height: 300px; 
    width: 700px; 
    background-color: #E25822; 
    -moz-border-radius: 200px; 
    -webkit-border-radius: 200px; 
    border-radius: 200px; 
} 

#player .player-disc { 
    position: absolute; 
    top: 50%; 
    left:25px; 
    transform: translateY(-50%); 
    /* animation: spin 5s infinite linear; */ 
    width: 250px; 
    height: 250px; 
    background: black url("https://i.ytimg.com/vi/SFfrthBpqQA/maxresdefault.jpg") no-repeat; 
    background-size: 250px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
} 

wenn ich die Animation auf Kommentar (wie oben sehen) die Seite nur gut aussieht, sondern sobald ich die animationszeile hinzufüge, geht die 'disc' aus der position und beginnt sich zu drehen, ich kann nicht herausfinden, was ich falsch mache.

hier ist der jsFiddle

Answer 1

Wie Sie diese auf Ihrer Festplatte haben, um es innerhalb der Spieler zu bewegen:

transform: translateY(-50%); 

Wenn Sie das Drehen animieren, über transform, die Animation überschreibt das übersetzen.

Sie können dieses Problem lösen, indem Sie das auf das Transformations des belebten übersetzen:

@keyframes spin { 
    0% { 
    transform: translateY(-50%) rotate(0deg); 
    } 
    100% { 
    transform: translateY(-50%) rotate(360deg); 
    } 
}