縦の整列とアニメーション

Question

私は音楽ライブラリに取り組んでいます。縦の整列とアニメーションに問題があります。そのため

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

と、このCSS：

は、私は、このhtmlコードを持って

@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%; 
} 

ページだけで罰金に見える（あなたが上記を参照できるように）私は、アニメーションをコメントアウトするときが、アニメーションラインを追加するとすぐに、「ディスク」が位置をずらして回転し始めます。何が間違っているのか分かりません。あなたはプレイヤー内を移動するために、あなたのディスク上でこれを持っているとして、ここで

はjsFiddle

Answer 1

です：あなたは回転をアニメーション化すると

transform: translateY(-50%); 

、transformを経由して、アニメーションが翻訳し上書きされます。

あなたがアニメーションのあまりに変換に変換追加することによってこの問題を解決することができます

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