Html 如何避免；“震动效应”；关于；悬停“；过渡和变换何时结合？

我正在尝试在

悬停

上设置一个框的动画，同时使用

变换

和

转换

。主要思想是有一个倒置的文本（不可读），当鼠标在每个框上移动时，文本将转换为该特定框上的正常文本（可读）

新小提琴编辑：

我已经得到了css的效果。如果你快速移动鼠标，你可以看到效果，但是如果你慢慢移动鼠标，盒子开始“摇晃”

我的问题是：如何避免这种“震动”效应

这是我正在使用的css代码：

.card-list {
  width: 50vw;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 60px;
  text-align: center;
}

.card-container {
  display: flex;
  flex-direction: column;
  background-color: #95dada;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 25px;
  cursor: pointer;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: scale(-1.05);
  transition: transform 0.5s ease-in-out;
}

.card-container:hover {
  transform: scale(1.05);
}

。卡片列表{
宽度：50vw；
保证金：60像素自动；
显示：网格；
网格模板列：1fr；
栅极间隙：60px；
文本对齐：居中；
}
.卡片容器{
显示器：flex；
弯曲方向：立柱；
背景色：#95dada；
边框：1px纯灰；
边界半径：5px；
填充：25px；
光标：指针；
-moz osx字体平滑：灰度；
背面可见性：隐藏；
转换：比例（-1.05）；
过渡：0.5s缓进缓出转换；
}
.card列表：悬停.card容器{
转换：标度（1.05）；
}

你好，世界

是的，这很有效，但问题是我的页面上有多个div，而您的解决方案会影响所有div。我只需要一个受

悬停影响的div

。我已经编辑了我的问题。这是新的修改=>@robe007代码已经更新，添加了一层DOM，现在可以完美地工作了。谢谢你花时间回答我的问题。謝謝