conflict between mix-blend mode and animation - css

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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>