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.
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.
The idea is that the temperature(grey line inside) grew from the bottom up. Set keyframes for the height.
@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.
asked June 10th 19 at 15:27
3 answers
answered on 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
you can not increase the height, and slim, and not white stripes and blue background, though, only you can animate and white strip
answered on June 10th 19 at 15:31
Make the parent
Keyframes:
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 }
} answered on June 10th 19 at 15:33
Or use standards instead of bicycles https://developer.mozilla.org/en-US/docs/Web/CSS/a... ...