在父div上使用CSS转换时，内部div会振荡

Question

请运行我的代码示例并将鼠标悬停在黑色正方形上，为什么内部div，白色边界div会振荡/抖动？我该如何让它停止这样做？

body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4px solid white;
width: 60px;
height: 60px;
}

<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>

目标

• 悬停在我的外部div(<div class="transition-container">(上时，我希望它生长，并希望使用过渡使其平滑
• 我不希望不断增长的div占用更多的空间。目前，为了实现这一点，我缩小了利润

Answer 1

添加transition-timing-function: steps(10, end);修复了我设计的示例。来源

body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
transition-timing-function: steps(10, end);
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4px solid white;
width: 60px;
height: 60px;
}

<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>

Answer 2

在<div class="inner-container">上将边框宽度从4px更改为4.5px可以修复它。将其更改为任何小数似乎都可以修复它，例如，如果我使用5.5px或3.5px，也可以修复它。我不明白为什么🤷‍♂️,很想知道为什么！

我不得不在我们的应用程序中使用这个修复程序，因为transition-time-function修复程序在我们更复杂的布局中不起作用。

body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4.5px solid white;
width: 60px;
height: 60px;
}

<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>