浏览器上的Animate <hr />宽度仅使用css调整大小

Question

我正在尝试在页面调整大小上设置小时宽度的动画，但它似乎没有任何作用。当浏览器调整大小时，字体会正确调整大小，并且字体的小时位置也会正确调整大小，但宽度会随浏览器大小立即调整大小。我不久前实现了这种行为，现在我无法找出我做错了什么。

以下是目前的完整页面代码：

function getLists() {
    var options =
        {
            "method" : 'GET',
            "headers" : headers,
        };
    var response = UrlFetchApp.fetch(url + 'lists', options);
    Logger.log(response);
    return response;
}

function main(){
    var result = getLists();
}

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;
}

Answer 1

正如Lister先生评论的那样， hr 的宽度无法转换，因为该属性没有变化（总是100％）。此属性的结果更改无关紧要！

处理此问题的正确方法是在真正更改的元素（容器）中设置转换。嗯，它的值总是50vw，但这是一个特殊情况，由浏览器处理，具有等效的像素值。

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;  /*   added */

}

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