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

Question

如果您在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>

无论如何混合混合应该生效

Answer 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>