混合混合模式和动画之间的冲突答案

【问题标题】：conflict between mix-blend mode and animation混合混合模式和动画之间的冲突
【发布时间】：2019-08-30 10:23:56
【问题描述】：

如果你在mix-blend-mode属性之前使用动画效果，你将无法获得混合混合模式。

一旦您删除动画类或禁用动画，mix-blend-mode 将起作用。

有什么问题？我花了几个小时来解决这个简单的事情。请帮忙

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

mix blend 无论如何都应该生效

【问题讨论】：

您发现了一个 Chrome 错误。它在 Firefox 上运行良好，在 Chrome 上也应该如此
我只在PC Windows平台上发现了这个问题
如何向 Chrome 开发者报告？
bugs.chromium.org/p/chromium/issues/list
.box 有黄色背景，并且还需要混合混合模式。如果您删除图像，您会看到旋转框无法通过它看到。您的图像仅与黄色背景混合

标签： css css-animations mix-blend-mode

【解决方案1】：

以前加个transform translateZ(0px)用来解决很多问题。

至少在我的 Chrome 中，似乎仍然如此：

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
  transform: translateZ(0px);  /* added */
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

【讨论】：

令人惊讶的是，任何创建堆叠上下文的属性都可以解决问题，例如 position: relative;z-index: 2; 或 translate(0px) 或 blur(0) 等
我也找到了 translate(0px)，但其他的更“出乎意料”。很好的发现！ @TemaniAfif

【解决方案2】：

将mix-blend-mode也添加到父元素，解决了这个问题。

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
  mix-blend-mode:multiply;
}

.box img{ mix-blend-mode:multiply;}


.animate{  
  border:1px solid red;
  border-radius: 1rem;
  width:2rem; 
  height:2rem;
  animation: spin 2s infinite linear;
  display:flex;
  align-items: space-around;
  align-content: stretch;
  justify-content: space-around;
}


@keyframes spin {
  0% {  transform: rotate(0deg); background-color: aqua; }
  50% { background-color: yellow; }
  100% { transform: rotate(1turn); background-color: aqua; }
}

<div class="animate">•</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

【讨论】：

【解决方案3】：

在这个问题中，animate 的堆栈顺序在 box 和 img 之间，因为 animate 使用了关键帧。我认为 keyframe 改变了 animate 的堆栈顺序。所以，img 无法融入 box。我们可以使用 z-index 更改元素的堆栈顺序。解决方案是 img 必须在框内。我们有两个选项。使用 z-index 的结果会有所不同。

第一个选项，我们可以在 animate 类中更改 animate 的堆栈顺序。 `

.animate{
  position:relative;
  z-index:2;
}

` 结果 - animate 将位于带有 img 的框的前面。

第二个选项，我们可以在盒子类中改变盒子的堆叠顺序。 `

.box{
  position:relative;
  z-index:2;
}

` 结果 - 带有 img 的框将位于动画的前面。

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  position:relative;
  z-index:2;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

【讨论】：