Morta 1 Morta 1 - 1 year ago 100
CSS Question

vertical align and animation

I'm working on a music library and i'm facing a problem with my vertical align and animation.

I have this html code :

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

and this css for it:

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

#player {
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%;
transform: translateY(-50%);
/* animation: spin 5s infinite linear; */
width: 250px;
height: 250px;
background: black url("") no-repeat;
background-size: 250px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;

when i comment out the animation (as you can see above) the page looks just fine, but as soon as i'm adding the animation line, the 'disc' goes down out of position and start spinning, i can't seem to figure out what am i doing wrong.

here's the jsFiddle

Answer Source

As you have this on your disc to move it within the player:

transform: translateY(-50%);

When you animate the rotate, via transform, the animation overwrites the translate.

You can solve this by adding the translate to the animate's transform too:

@keyframes spin {
  0% { 
    transform: translateY(-50%) rotate(0deg);
  100% {
    transform: translateY(-50%) rotate(360deg);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download