動畫從底部到頂部的高度

Question

我有麻煩動畫從底部到頂部的高度變化。目前，隨着每種顏色的高度發生變化，整個圖例本身都會被推下去：http://jsfiddle.net/b7q9781o/

如何讓圖例保持其位置並且高度從底部（底部）變爲頂部？

如果我將float: left;添加到#holder，它有點像我想要的那樣工作，但它會翻轉。嘗試一下。

#holder { 
    border: 1px solid red; 
    margin: 10em; 
    display: block; 
    height: 150px; 
    position: relative; 
} 
.legend { 
    height: 5px; 
    width: 14px; 
    display: inline-block; 
    bottom: 0; 
    position: relative; 
} 

Answer 1

請試試這個：

#holder { 
    border: 1px solid red; 
    margin: 10em; 
    display: block; 
    height: 150px; 
    position: fixed; 
    float: left; 
} 

DEMO