你可以使用一个grid来动画显示列的宽度。下面的解决方案使用has()伪代码not yet supported by Firefox。

* {
  box-sizing: border-box;
}

.container {
  background-color: lightblue;
  font-family: sans-serif;
  font-size: 1.1em;
  display: grid;
  /* Default setting equal width for all columns */
  grid-template-columns: 2fr 2fr 2fr;
  transition: grid-template-columns 0.5s ease-in-out;
}

.left-pane,
.center-pane,
.right-pane {
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
}

.left-pane {
  background-color: yellow;
}

.right-pane {
  background-color: aquamarine;
}

/* When center pane OR right pane is hovered, adjust the width of the columns of the parent */
.container:has(.center-pane:hover), .container:has(.right-pane:hover) {
  grid-template-columns: 1fr 2.5fr 2.5fr;
}

<div class="container">
  <div class="left-pane">
    Left Pane Content
  </div>
  <div class="center-pane">
    Center Pane Content
  </div>
  <div class="right-pane">
    Right Pane Content
  </div>
</div>

您可以在类.left-pane上添加transition: all 0.2s ease-in-out; CSS以使其平滑。

const leftPane = document.getElementById('leftpane');
const centerPane = document.getElementById('centerpane');
const rightPane = document.getElementById('rightpane');
var addMode2 = function () {
    leftPane.classList.add("mode-2");
    rightPane.classList.add("mode-2");
    centerPane.classList.add("mode-2");
}
var removeMode2 = function () {
  leftPane.classList.remove("mode-2");
    rightPane.classList.remove("mode-2");
    centerPane.classList.remove("mode-2");
}
leftPane.addEventListener("mouseover", function (ev) {
    removeMode2();
});
centerPane.addEventListener("mouseover", function (ev) {
  addMode2();
});
rightPane.addEventListener("mouseover", function (ev) {
    addMode2();
});

.container {
  background-color: lightblue;
  font-family: sans-serif;
  font-size: 1.1em;
}
.left-pane, .center-pane, .right-pane {
  padding-block-start: 10vh;
  display: inline-block;
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
}
.left-pane { width: 25vw; background-color: yellow; transition: all 0.2s ease-in-out; }
.center-pane { width: 40vw; }
.right-pane { width: 33vw;  background-color: aquamarine; }

.left-pane.mode-2 { width: 10vw; }
.center-pane.mode-2 { width: 47vw; }
.right-pane.mode-2 { width: 40vw; }

<div class="container" >
    <div class="left-pane" id="leftpane">
        Left Pane Content  
    </div>
  <div class="center-pane" id="centerpane">
        Center Pane Content
    </div>
  <div class="right-pane" id="rightpane">
        Right Pane Content  
    </div>
</div>

你可以通过在CSS中为.left-pane, .center-pane, .right-pane元素添加transition属性来实现这一点。最好为所有三个窗格都添加该属性，因为它们在悬停时都会改变宽度。
下面是一个例子：

.left-pane, .center-pane, .right-pane {
  padding-block-start: 10vh;
  display: inline-block;
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
  /*  Transition for the width  */
  transition: 250ms width ease;
}

如您所见，我为transition添加了3个属性。
第一个是时间，定义了你的动画需要多长时间才能完成。第二个是你想要动画的属性，在你的例子中，它是width，最后一个是插值器，默认情况下，它被设置为线性，这可能是你想要的，但你可以改变它，我设置为ease，使效果更赏心悦目。
您可以阅读更多关于transition的内容，了解docs中的所有可能性。