Анимация Высота снизу вверх

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