Javascript css替换居中句子中的单词，并使宽度平滑地重新调整

我正在寻找一个像这一页上的主要效果

页面显示一个居中的句子，一个单词被替换，句子分为单词的左右两部分，根据新单词的宽度平滑地重新调整位置

这个动画是
令人惊叹的
你不觉得吗？

此代码使零件在替换单词后卡入到位，但

如何才能实现平稳过渡？

document.addEventListener（'DOMContentLoaded'，（）=>{
const stringsCont=document.querySelector（“#strings cont”）；
常量字符串=[…stringsCont.querySelectorAll（'.string'）]；
设active=0；
下一步=（）=>{
strings.forEach（（s，i）=>i==active？s.classList.add（'active'）：s.classList.remove（'active'）；
stringsCont.style.width=strings[active].offsetWidth+'px'；
活动=（活动+1）%strings.length；
}
设置间隔（下一步，3000）；
设置超时（下一步，0）
});
h1{
字体系列：无衬线；
字体大小：16px；
文本对齐：居中；
字体大小：正常；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#字符串续{
位置：相对位置；
显示：内联flex；
过渡：宽度。3s轻松；
证明内容：中心；
}
.字符串{
字体大小：粗体；
过渡：不透明度.3s缓和，顶部.3s缓和；
位置：绝对位置；
不透明度：0；
左：50%；
最高：100%；
转化：translateX（-50%）；
空白：nowrap；
}
.字符串：之前{
内容：''；
位置：绝对位置；
最高：100%；
左：0；
高度：3倍；
宽度：0；
背景色：紫罗兰色；
}
.string.active{
过渡：不透明度。3s缓解；
不透明度：1；
位置：静态；
变换：translateX（0）；
左：0；
排名：0；
}
.string.active:之前{
宽度：100%；
过渡：所有2.7秒轻松；
转换延迟：.3s；
}

发送电子邮件
乱数假文
多洛·希特·安米特
献祭精英
Sed Do Eiusmod
满怀信心
寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。看，我试着把它归结起来，谢谢你这是一个复杂的转变。你不能只交换文本。首先，必须折叠当前元素，然后将元素重新增加到新的宽度。你需要弄清楚你将如何做到这一点。这是一个多么好的解决方案，谢谢
body {
    display: flex;
    justify-content: center;
}

#swappable {
    display: inline-block;
}

const swappables = ["bad", "great", "fantastic", "boring"];

let index = 0;
setInterval(() => {
    document.getElementById("swappable").innerHTML = swappables[index];
    index = index == swappables.length - 1 ? 0 : index + 1;
}, 3000);