如何用纯CSS实现竖线从上到下动画？已实现但transform属性受影响

你的代码里transform: rotate(90deg)并没有被动画影响，但默认的transform-origin（变换原点）是元素中心，导致旋转后的竖线在动画width时会从中心向上下两边扩展，而非你想要的从上到下延伸。以下是两种可行的解决方案：

方案1：调整变换原点，基于旋转实现 #

修改元素的transform-origin为左上角，让旋转后的竖线从顶端开始向下延伸：

.line {
  width: 5rem;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 3rem;
  left: 3rem;
  transform: rotate(90deg);
  transform-origin: 0 0; /* 将变换原点设为元素左上角 */
  animation: stand linear 1s forwards; /* forwards 保持动画结束后的状态 */
}
@keyframes stand {
  0% {width: 0;}
  100% {width: 5rem;}
}

方案2：直接使用高度动画（更直观） #

无需旋转，直接创建竖线并动画其高度，逻辑更清晰：

.line {
  width: 1px;
  height: 5rem;
  background-color: black;
  position: absolute;
  top: 3rem;
  left: 3rem;
  animation: stand linear 1s forwards;
  transform-origin: top center; /* 确保动画从顶端开始 */
}
@keyframes stand {
  0% {height: 0;}
  100% {height: 5rem;}
}

HTML部分保持不变：

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

内容的提问来源于stack exchange，提问作者Sam Seith