transition 和 transform 结合时，如何避免 "shake effect" on "hover"？

Question

我正在尝试同时使用 transform 和 transition 在 hover 上制作一个框的动画。主要想法是有一个颠倒的文本（不可读），当鼠标经过每个框时，文本将在该特定框上转换为正常（可读）。

新 fiddle 编辑：

我用css得到了效果。快速移动鼠标可以看到效果，但是如果慢慢移动鼠标，方框开始"shake".

我的问题是：如何避免这种 "shake" 影响？

这是我正在使用的 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

.card-list {
  width: 50vw;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr 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);
} */

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

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

在.card-container外加一层DOM，:hover的DOM不缩放

transition 和 transform 结合时，如何避免 "shake effect" on "hover"？

How to avoid "shake effect" on "hover" when transition and transform are combined?

html

css

transition

transform

css-transitions