css transition 闪一下

CSS transition是一种让element在发生改变时实现平滑变化的CSS属性。然而，在某些情况下，我们会发现transition执行时出现了“闪一下”的现象。这种现象是因为浏览器在渲染过程中对element的变态进行了优化而导致的。

.Box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-duration: 1s;
}

.Box:hover {
  background-color: blue;
}

上述代码表示当鼠标hover时，.Box的背景色从红变成蓝色。然而，当我们执行这段代码时，我们会发现.Box在发生变化时会出现一瞬间的闪烁现象。

这是因为浏览器在处理rendering pipeline时，会将某些层级的element进行合并绘制。当我们对一个element的属性进行改变时，浏览器为了优化性能，会将该element所在的合并层级进行重新绘制，而这个重新绘制的过程是瞬间完成的。这就导致了我们看到了一瞬间的闪烁。

为了避免这种现象的出现，我们可以尝试使用以下方法：

.Box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-duration: 1s;
  backface-visibility: hidden;
}

backface-visibility的作用是可以将element的背面隐藏，防止闪烁的出现。我们可以将.back的backface-visibility设置为hidden，从而实现平滑的变化效果。