如何從上至下縮小元素？

Question

我想通過將其從100％重新調整爲零來消除動畫。但是，如果我只是在動畫上設置了字段高度，那麼元素將從底部開始縮小，我希望它從頂部開始縮小。任何想法如何使紅外發生？

這段代碼顯示今天我的動畫：

@-webkit-keyframes my-animation /* Safari and Chrome */ 
{ 

    0% 
    { 
     opacity: 1; 
     height:44px;//element size 
    } 

    100% 
    { 
     opacity: 0; 
     height: 0px; 
    } 


} 

在此先感謝。

Answer 1

你可以通過使用一個小定位來做你的事情。下面是相關的代碼（也重構）：

<div class="foo"></div> 

-

.foo { 
    position: relative; 
} 
@keyframes foo { 
    100% { 
     opacity: 0; 
     height: 0; 
     top: 44px; /* Height of element */ 
    } 
}​ 

，這裏是一個活生生的例子（懸停觸發動畫）：http://jsfiddle.net/joshnh/Fdg3C/