从底部到顶部的动画高度

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