仅用CSS实现浏览器缩放时<hr>宽度动画的问题排查

我明白你遇到的问题了——窗口缩放时<hr>的宽度瞬间变化，完全没有你想要的平滑过渡效果，明明之前实现过，现在却卡壳了对吧？让我帮你找找问题所在。

问题根源 #

你的<hr>设置了width: 100%，它的宽度完全依赖父元素.container；而.container的宽度是50vw，窗口缩放时这个数值是瞬间更新的，没有任何过渡动画。哪怕你给<hr>加了transition: width 2s ease，它的宽度变化也是跟着父容器的即时变化走的，自然看不到平滑的动画效果。

解决方案 #

给.container也加上过渡效果，让它的宽度变化变得平滑，这样<hr>的100%宽度就会跟着父容器的渐变过程一起动画。

修改后的完整代码如下：

CSS 部分

html, body {
  background: #aaa;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  transition: all 1s;
  font-size: calc(1.25vw + 1.75vh);
}

h1, h3 {
  font-weight: normal;
}

hr {
  width: 100%;
  margin-left: 0%;
  border: 0;
  background-color: #fff;
  height: 1px;
  transition: width 2s ease;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.container {
  width: 50vw;
  transition: width 2s ease; /* 新增这一行，和hr的过渡时长保持一致 */
}

HTML 部分

<div class="center">
  <div class="container">
    <hr>
    <h1>Test</h1>
    <h3>Lorem ipsum Lorem ipsum Lorem ipsum.</h3>
    <hr>
  </div>
</div>

额外说明 #

如果你不想给整个容器加过渡，也可以直接把<hr>的宽度改成50vw，保留它自身的transition，这样也能实现效果。但我更推荐给容器加过渡——这样容器内的其他元素（比如标题文本）也能跟着有更统一的适配动画，整体体验会更好。

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