CODEWITHSUNDEEP
htmlcssanimation
Morta1
Morta1

Reputation: 619

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>
</div>

and this css for it:

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

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

Upvotes: 0

Views: 75

Answers (1)

jedifans
jedifans

Reputation: 2297

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

Upvotes: 1

Related Questions