Html 当输入被聚焦时，CSS转换的方向改变

在尝试使用CSS设置输入动画以滑出的过程中，我遇到了一些我不理解的行为，希望有人能帮助我理解。本质上，只要输入在转换过程中没有获得焦点，转换就会按照我的预期运行。然而，在转换过程中一旦获得焦点，转换就会突然看起来“右对齐”，而不是我所期望的“左对齐”

这里有一个MWE来说明我的意思。如果不太快地聚焦输入，则以下代码段可以正常工作：

let b=document.getElementsByTagName（“按钮”）[0]；
let container=document.getElementsByClassName（“容器”）[0]；
b、 addEventListener（“单击”，（）=>{
container.classList.toggle（“扩展”）；
});   
.container{
溢出：隐藏；
宽度：0；
过渡：1s宽缓；
}
.集装箱{
宽度：22厘米；
}
.保证金{
背景：绿色；
宽度：20厘米；
}
输入{
左边距：2ch；
宽度：20厘米；
}
按下按钮以获得魔力！
即使没有转换，我们也可以重现该问题。只需将输入放在一个较小的容器中，并将注意力集中在它上，即可得到奇怪但合乎逻辑的结果：


.container{
溢出：隐藏；
}
.集装箱{
宽度：100px；
}
.保证金{
背景：绿色；
宽度：20厘米；
}
输入{
左边距：2ch；
宽度：100%；
}
这很有道理，我可以自己验证这种行为。谢谢你教我新东西！