为什么在这个 CSS 过渡期间会有明显的滞后？答案

【问题标题】：Why is there a visible lag during this CSS transition?为什么在这个 CSS 过渡期间会有明显的滞后？
【发布时间】：2020-07-16 02:59:31
【问题描述】：

此 html 元素的过渡在第一次运行时有明显的滞后。此卡片翻转机制在您将鼠标悬停不止一次后会很顺畅。有人可以解释为什么以及如何解决它吗？

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.k-card {
  border-radius: 25px;
  width: 250px;
  margin: 2%;
  border-color: white;
  height: 330px;
}

.k-card-image {
  text-align: center;
  align-content: center;
}

.k-card-footer {
  text-align: center;
  border: none;
  position: absolute;
  bottom: 1px;
  width: 100%;
  background-color: inherit;
  font-weight: bold;
  color: white;
  align-items: center;
  border-radius: 25px;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
  border-radius: 25px;
  width: 250px;
  height: 330px;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  border-radius: 25px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  border-radius: 25px;
}


/* Style the front side */

.flip-card-front {
  background-color: #18988B;
}

.k-button.k-primary {
  background-color: #18988B;
  padding: 2px;
  border-color: #18988B;
}


/* Style the back side */

.flip-card-back {
  background-color: #58595B;
  transform: rotateY(180deg);
}

<div class="flip-card k-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <br />
      <center>
        <img class="k-card-image" src="https://i.picsum.photos/id/1003/400/400.jpg" width="70%" />
      </center>
      <div class="k-card-footer">
        <p>REPORTS</p>
      </div>
    </div>
    <div class="flip-card-back">
      <br />
      <center>
        <img class="k-card-image" src="https://i.picsum.photos/id/1001/400/400.jpg" width="70%" />
      </center>
      <div class="k-card-footer">
        <p>TEST</p>
      </div>
    </div>
  </div>
</div>
</div>

还有一个指向 jsfiddle 的链接：https://jsfiddle.net/McRobBlob/s9f07wgy/

谢谢！

【问题讨论】：

标签： html css css-transitions css-transforms

【解决方案1】：

问题在于属性transform-style: preserve-3d;。

将其从.flip-card-inner 块中移除并将其移动到.flip-card:hover .flip-card-inner 块中。

.flip-card-inner {
  border-radius: 25px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
/*  transform-style: preserve-3d; remove */
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  transform-style: preserve-3d; /* add */
}

更新

@TemaniAfif 评论后我有更好的解决方案：

只需从您的 CSS 中删除 backface-visibility: hidden;。

.flip-card-front,
.flip-card-back {
/* -webkit-backface-visibility: hidden; remove */
/* backface-visibility: hidden;  remove */
}

【讨论】：

动画会有所不同，鼠标移开时会闪烁
移除背面可见性也会在动画过程中产生问题，因为旋转时背面会略微可见。
我觉得还可以。
可能并非在所有浏览器中。在我的 Chrome (Windows) 上，我可以看到一个小的 bad 效果。

【解决方案2】：

我会尝试将will-change: transform; 或will-change: auto; 添加到.flip-card-inner。

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

【讨论】：