动画<；人力资源>；仅使用css调整浏览器上的宽度

我试图在页面调整上设置一个hr宽度的动画，但似乎没有任何效果。当浏览器调整字体大小时，字体大小会正确调整，带有字体的hr位置也会正确调整，但宽度会随浏览器大小立即调整。一段时间前我就有了这种行为，现在我只是不知道我做错了什么

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

html，
身体{
背景：#aaa；
文本对齐：居中；
文本转换：大写；
颜色：#fff；
字母间距：2px；
过渡：所有1；
字体大小：calc（1.25vw+1.75vh）；
}
h1，
h3{
字体大小：正常；
}
人力资源{
宽度：100%；
左边缘：0%；
边界：0；
背景色：#fff；
高度：1px；
过渡：宽度2秒；
}
.中心{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.集装箱{
宽度：50vw；
}

试验
Lorem ipsum Lorem ipsum Lorem ipsum。

正如李斯特先生所评论的那样，hr的宽度不能转换，因为属性没有改变（总是100%）。此属性的结果改变并不重要

正确的处理方法是在真正发生变化的元素（容器）中设置转换。没错，它的值总是50vw，但这是一个特例，由浏览器以像素为单位处理

html，
身体{
背景：#aaa；
文本对齐：居中；
文本转换：大写；
颜色：#fff；
字母间距：2px；
过渡：所有1；
字体大小：calc（1.25vw+1.75vh）；
}
h1，
h3{
字体大小：正常；
}
人力资源{
宽度：100%；
左边缘：0%；
边界：0；
背景色：#fff；
高度：1px；
过渡：宽度2秒；
}
.中心{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.集装箱{
宽度：50vw；
过渡：宽度2秒；增加/**/
}

试验
Lorem ipsum Lorem ipsum Lorem ipsum。

啊，我在等这个问题！我知道如何修复它（更换宽度：100%的东西使用大众单位），但我不知道原因。。。您的问题是：为什么转换在调整大小时使用vw/vh单位，而不使用%Valueswiths（百分比）而不是宽度（长度单位）的类型。它们是可设置动画的，但仅作为百分比值（因此在本例中，它们从100%变为100%！），而长度单位是以像素为单位计算的。提到了这两种动画类型。@MrLister我想值得添加一个答案；）因为我自己得到了逻辑，但无法找到清晰的文字和解释