How to animate standing line with css

December 9, 2022

I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.

.line {
  width: 5rem;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 3rem;
  left: 3rem;
  transform: rotate(90deg);
  animation: stand linear 1s;
}
@keyframes stand {
  0% {width: 0;}
  100% {width: 5rem;}
}

<div class="line"></div>

>Solution :

That’s because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.

.line {
  width: 1px;
  height: 5rem;
  background-color: black;
  position: absolute;
  top: 3rem;
  left: 3rem;
  animation: stand linear 1s;
}
@keyframes stand {
  0% {height: 0;}
  100% {height: 5rem;}
}