Как поменять направление изменения высоты?

Question

[Филип]

Есть термометр на svg.
Идея в том, чтобы температура(серая линия внутри) увеличивалась снизу вверх. Задаю keyframes для высоты.

@keyframes progress {
	0%           { height: 0%  }
	30%         { height: 30% } 
	60%         { height: 60% }
	90%	        { height: 90% }
	100%         { height: 100% }
}

Но так получаеться, что дефолтное направление координат вниз. И высота увеличиваеться сверху вниз, а не так как мне нужно. Может, кто знает, что можно сделать?

Анимация должна увеличиться до такого.

Answer 1

[ой всё]

найдите популярные картинки, которые обычно показывают на запрос "гештальт"

вы можете не увеличивать высоту, а уменьшать, и не белой полосы, а синего фона, хотя, скорее, всего можно анимировать и белую полосу

Answer 2

[Lumore]

Сделайте у родителя overflow: hidden, а у полосы height: 100%;top: 100%
Keyframes:

@keyframes progress {
  0%           { top: 100%  }
  30%         { top: 90% } 
  60%         { top: 60% }
  90%	        { top: 30% }
  100%         { top: 0 }
}

Answer 3

[Andrew Ghostuhin]

Филип Или использовать стандарты вместо велосипедов https://developer.mozilla.org/en-US/docs/Web/CSS/a... ...