How to change the direction of change of the height?

There is a thermometer on svg.
The idea is that the temperature(grey line inside) grew from the bottom up. Set keyframes for the height.
5a307b65c3a76310791814.jpeg
@keyframes progress {
 0% { height: 0% }
 30% { height: 30% } 
 60% { height: 60% }
 90% { height: 90% }
 100% { height: 100% }
}


But poluchaetsya so that the default direction of the coordinates down. And the height increase from top to bottom, but not as much as I need. Maybe someone knows what can I do?

The animation has to increase to such.
5a307bed07e9c929078390.jpeg
June 10th 19 at 15:27
3 answers
June 10th 19 at 15:29
find popular pictures, usually at the request of "Gestalt"

you can not increase the height, and slim, and not white stripes and blue background, though, only you can animate and white strip
June 10th 19 at 15:31
Make the parent overflow: hiddenand the stripe height: 100%;top: 100%
Keyframes:
@keyframes progress {
 0% { top: 100% }
 30% { top: 90% } 
 60% { top: 60% }
 90% { top: 30% }
 100% { top: 0 }
}
June 10th 19 at 15:33
Or use standards instead of bicycles https://developer.mozilla.org/en-US/docs/Web/CSS/a... ...

Find more questions by tags SVGAnimationCSSHTML