当合并过渡和变换时如何避免对“悬停”产生“抖动影响？

Question

[我正在尝试同时使用hover和transform为transition上的框设置动画。主要思想是制作一个上下颠倒的文本（不可读），并且当鼠标移到上方时，文本将转换为普通文本（可读）。

新小提琴已编辑：

https://jsfiddle.net/mt3x1phq/

我已经通过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);
}

Answer 1

.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-list:hover .card-container {
  transform: scale(1.05);
}

 <div class="card-list">
      <div class="card-container">
        <h1>
          Hello World
        </h1>
      </div>
    </div>

考虑此代码段。

   .card-list{
       height: 143px;
    }
    .card-list:hover .card-container {
      transform: scale(1.05);
    }

缩放时，鼠标移离DOM，.card-container