CSS3向上滑动transistion

Question

你好我有一个div我不会暴露在点击一个链接，就在页面的底部......此刻透着弹出它看起来像这样： http://jsfiddle.net/XPJC5/

body{margin:0;} 
#lightbox { 
     display:none; 
     position:absolute; 
     bottom:5px; 
     z-index:1000; 
     width:100%; 
     background-color:#09F; 
     height:50px; 
     float:left; 
     font-family: 'helvetica_bqregular'; 
     font-size:20px; 
     line-height:65px; 
     color:#FFF; 
     text-align:center; 
      } 

/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */ 

#lightbox:target { 
     display:block; 
     } 

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a> 
<div id="lightbox"> 

      <div style=" background-color:#CBE376; width:100%; line-height:65px; height:65px; border-bottom:solid #999 thin; -webkit-box-shadow: 4px 4px 4px 4px #333;box-shadow: 4px 4px 4px 4px #333; clear:both;"> 
Consumer 
      </div> 
      <div style=" background-color:#94C8F1; line-height:65px; width:100%; height:65px;"> 

      Business</div> 
    <div style=" background-color:#333; width:100%; height:65px;"><a href="#" style="color:#fff; text-decoration:none;">Close</a> 

      </div></div> 

，但我想框从底部与此类似向上滑动： http://jsfiddle.net/R8zca/4/

任何人都可以有成就感帮助吗？似乎在审判中失败。

感谢

Answer 1

删除HTML中的内嵌样式的高度和框中设置为0px在CSS的初始高度，然后使用CSS过渡，使他们的全高度

HTML

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a> 
<div id="lightbox"> 

      <div style=" background-color:#CBE376; width:100%; line-height:65px; border-bottom:solid #999 thin; -webkit-box-shadow: 4px 4px 4px 4px #333;box-shadow: 4px 4px 4px 4px #333; clear:both;"> 
Consumer 
      </div> 
      <div style=" background-color:#94C8F1; line-height:65px; width:100%; "> 

      Business</div> 
    <div style=" background-color:#333; width:100%;"><a href="#" style="color:#fff; text-decoration:none;">Close</a> 

      </div></div> 

CSS

body{margin:0;} 
#lightbox div 
{ 
    height: 0px; 
} 
#lightbox { 
     display:block; 
     position:absolute; 
     bottom:5px; 
     z-index:1000; 
     width:100%; 
     background-color:#09F; 
     float:left; 
     font-family: 'helvetica_bqregular'; 
     font-size:20px; 
     line-height:65px; 
     color:#FFF; 
     text-align:center; 
      } 

/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */ 

#lightbox:target div 
{ 
    height: 65px; 
    -webkit-transition:all 1s ease; 
    -moz-transition:all 1s ease; 
} 

http://jsfiddle.net/axrwkr/XPJC5/2