如何让CSS Transition从中心而非左侧展开横线宽度动画？

当然有办法实现！你不用纠结找类似transform-origin的专属属性，其实用现有的CSS特性就能轻松搞定从中心向外展开的横线动画，我给你几种实用的方案：

方案1：使用transform: scaleX()（最推荐） #

这个方法利用CSS变换的特性，transform-origin默认就是元素中心，刚好符合你的需求，而且不会影响页面布局（变换是视觉层面的，不改变元素占位）。

修改你的CSS和JS如下：

.line {
  height: 2px;
  background: #000;
  /* 初始状态：横向缩放为0，完全隐藏 */
  transform: scaleX(0);
  /* 给变换添加过渡动画 */
  transition: transform 0.5s ease;
  /* 默认就是center，可省略，若需要调整可修改 */
  transform-origin: center;
}

// 触发动画时，将缩放值改为1
document.querySelector('.line').style.transform = 'scaleX(1)';

方案2：利用margin: auto实现居中扩展 #

通过让横线元素水平居中，修改宽度时左右边距会自动调整，从而实现从中心向外展开的效果。这种方法会改变元素的实际宽度，适合需要元素占位跟随宽度变化的场景。

.line {
  height: 2px;
  background: #000;
  width: 0;
  /* 水平居中 */
  margin: 0 auto;
  transition: width 0.5s ease;
}

// 触发动画时，设置目标宽度
document.querySelector('.line').style.width = '100%';

方案3：绝对定位+宽度过渡 #

通过绝对定位让元素的中心点固定，修改宽度时向两侧扩展：

.line {
  height: 2px;
  background: #000;
  width: 0;
  position: relative;
  /* 让元素的左侧对齐父容器中心 */
  left: 50%;
  /* 向左偏移自身宽度的一半，实现中心定位 */
  transform: translateX(-50%);
  transition: width 0.5s ease;
}

document.querySelector('.line').style.width = '100%';

这几种方案都能实现你想要的从中心向外展开的动画效果，你可以根据自己的布局需求选择最合适的一种~

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