CODEWITHSUNDEEP
csscss-animationsmix-blend-mode
Vosidiy Muslimbek
Vosidiy Muslimbek

Reputation: 111

conflict between mix-blend mode and animation

If you use animation effect before mix-blend-mode property you will not get mix blend mode.

Once you remove the animation class or disable animation, then mix-blend-mode will work.

What is the problem? I spent hours to solve just this simple thing. Please, help

.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 should take effect anyway

Upvotes: 11

Views: 4267

Answers (3)

user2560539
user2560539

Reputation:

Adding mix-blend-mode to the parent element also, solves the issue.

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

Upvotes: 5

NayDwe
NayDwe

Reputation: 649

In this problem, animate's stack order is between box and img because animate use keyframe.I think keyframe change animate's stack order.So,Img cannot blend in box.We can change element's stack order by using z-index. Solution is img must within box.We have two options.Results will be different where you use z-index.

First option, we can change animate's stack order in animate class. `

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

` Result - animate will be front of box with img.

Second option, we can change box's stack order in box class. `

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

` Result - box with img will be front of animate.

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

Upvotes: 0

vals
vals

Reputation: 64214

In the old times, adding a transform translateZ(0px) used to solve a lot of problems.

At least in my Chrome, seems to still be the case:

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

Upvotes: 7

Related Questions