title: CSS3 Translate % Units?
body: <p>Here is what I want to do</p>
  
  <p>a. I have a ball whose top edge is located 50% below the top of its container
  b. I want to apply a translation that moves it do it sits on the floor of the contaienr</p>
  
  <p>Here is what I tried</p>
  
  <pre><code>.ball
  {
   position:absolute;
   left:25%;
   top:50%;
   height:80px;
   width:80px;
   -webkit-animation:fall 3.4s normal forwards ease-in-out;
  }
  
  @-webkit-keyframes fall
  {
   0%{-webkit-transform:translateY(0%);}
   100%{-webkit-transform:translateY(100%);}
  }
  </code></pre>
  
  <p>The end result I see is quite unexpected - measuring the extent of the drop with the PicPick pixel ruler indicates a drop of 80px i.e. 100% corresponds to the <strong>height</strong> of the ball. By using pixel units I can get the ball to drop through the precise pixel distance that I indicate but that is not quite what I need to do.</p>
  
  <p>I suspect that I haven't quite fully understood the issues involved here.  I'd much appreciate any help.</p>