CODEWITHSUNDEEP
htmlcsscss-animations
visibleinvisibly
visibleinvisibly

Reputation: 121

Center a DIV when animating

I making a animation on set of DIV's which are wrapped inside div with id="wrapper" using CSS3. However if I hover on the rounded box, the animation is left aligned but not center aligned. The URL for the code is @http://jsfiddle.net/X5Ycu/

<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>

Thanks & Regards

Alex

Upvotes: 0

Views: 54

Answers (4)

pzin
pzin

Reputation: 4248

Well, if you use modern CSS as you say, then you could specify:

left: 50%; /* or figure out where the center is */

And then just move the element to its half size to the left, which you can do using transform:

transform: translateX(-50%);

So now, even when your element is changing its size, also its position (translation) will change according to its size. This (the translation) will always work, regardless of how your element is positioned or displayed.

You will surely need to use some vendor prefixes.

Upvotes: 0

Jose Paredes
Jose Paredes

Reputation: 4080

You can add margin applied effect like TOP and BOTTOM also RIGHT and LEFT to these two applied to half the original size

see that example: http://jsfiddle.net/X5Ycu/1/

.limeball{
   margin: 0px; // original margin
   width: 100px; //original width
   height: 50px; //original height
}

.limeball{
  width: 0px;
  height:0px;
  margin: 25px 50px;
  // margin  results:
  // (original width) / 2 = 50px (LEFT AND RIGHT)
  // (original height) / 2 = 25px (TOP AND BOTTOM)
}

Upvotes: 0

Ireally Rock
Ireally Rock

Reputation: 236

change the blocks from inline-block to display: block add margin 0 auto remove the position absolute

quick fiddle here http://jsfiddle.net/ktcle/X5Ycu/2/

#wrapper{
position:relative;
width: 400px
}

.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;

}

Upvotes: 1

Godinall
Godinall

Reputation: 2290

Try below:

div.roundedbox:hover{
    width:100px;
    left: 137.5px; //Add this line
}

Upvotes: 0

Related Questions