html - 动画高度从底部到顶部

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