Html 在变换过程中隐藏文本（即缩放），使其仅在变换结束后可见，同时保持文本大小不变

请原谅这个基本问题。我已经用

变换：缩放（6.5）

构建了一个扩展到

：悬停

的圆。在圆圈内，我希望在转换完成之前隐藏文本。此外，文本大小需要保持不变（即无转换）。我尝试了

transform:unset！重要的和玩弄
可见性
，但它们并没有像我希望的那样发挥作用。感谢您的帮助


//此块按预期工作
.扩大{
转变：转变。8s；
宽度：1px；
高度：1px；
边界半径：50%；
保证金：0自动；
}
//这座大楼按预期运转
.展开：悬停{
转换：比例（6.5）；
}
.不，我不想扩大{
宽度：100px；
可见性：隐藏；
}
.否展开：悬停{
转变：转变。8s；
能见度：可见；
转换：取消设置！重要；
}

这是一个圆圈
一种方法如下：


。展开{
转变：转变。8s；
宽度：100px；
高度：100px；
边界半径：50%；
保证金：0自动；
边框：1px纯色灰色；
}
.展开：悬停{
过渡：宽度1s，高度1s；
宽度：300px；
高度：300px；
}
#正文{
利润率最高：42%；
不透明度：0；
文本对齐：居中；
}
.展开：悬停#文本{
过渡：不透明度0.1s，缓减1s；
不透明度：1；
}

这是一个圆圈
我在鼠标悬停部分添加了字体大小


。展开{
转变：转变。8s；
宽度：100px；
高度：100px；
背景：黑色；
边界半径：50%；
线高：80px；
文本对齐：居中；
颜色：透明；
位置：绝对位置；
最高：50%；
左：50%；
溢出：隐藏；
}
.展开：悬停{
转换：比例（6.5）；
颜色：白色；
字号：2px；
}

这是一个圆圈
以下是使用纯css的方法。只需应用相反大小的比例以保持文本大小不变，并使用flex将其居中

编辑：如果您希望在鼠标悬停并退出悬停区域时进行相同的转换，则可以移动
转换：transform.8s应用于div级别（在本例中为
.circle
class）


.center{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：300px；
}
.圆圈{
背景颜色：绿色；
边界半径：100%；
宽度：100px；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
转变：转变。8s；
}
.圆圈：悬停{
转换：比例（6.5）；
}
.圆圈：悬停。不展开{
过渡：能见度0.8s线性0.8s；
能见度：可见；
变换：比例（0.154）；//大约为1/6.5
}
.圆圈，没有展开{
可见性：隐藏；
}

这是一个圆圈
这是一个很好的选择，但在
：hover
期间，我遇到了与以前相同的文本缩放问题。是否希望文本在悬停时不改变字体大小？正确。我一直在绞尽脑汁研究如何使文本不随圆圈扩展。我已经测试了@rainer plumer发布的内容，这似乎是目前为止最好的选择。圆圈闭合的动画有点僵硬，但这应该是一个简单的解决办法。我做了一个新的检查，更新的版本更好。但是，在测试了@codecheshire发布的内容之后，我想我会继续使用该解决方案。我喜欢你的解决方案，但它会将我页面上圆圈周围的元素向下推。这与我试图实现的目标非常一致。当你用鼠标滑过时，虽然关闭是突然的。有什么秘密使它有相同的过渡关闭，如这里所见？如果我理解正确，通过在根级别应用过渡，可以在悬停和脱离悬停时进行平滑动画。请参见答案中编辑的代码