mix-blend-mode doesn't working with animation over it

Question

I have this codepen example: https://codepen.io/levai-ferenc/pen/bGLYVOr

<div class="wrapper">
  <div class="element">
    <div class="image" />
  </div>
</div>

@keyframes alpha_buildIn {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);}

  100% {
    opacity: 1;
    -webkit-opacity: 1;
  }
}

@-webkit-keyframes alpha_buildIn {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
  }
}

.wrapper {
  width: 580px;
  height: 400px;
  background-color: rgb(218, 39, 39);
  transform: scale(2.81724);
  transform-origin: 0px 0px 0px;
}

.element {
  animation: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal both running 
alpha_buildIn;
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  background-image: url(https://d1az8j93w0r5an.cloudfront.net/assets/media/8oxrr);
  mix-blend-mode: color;
}

I have to use mix-blend-mode, but it doesn't apply if I use animation on a div over

Any idea how can I do it to work both ? Animation and blend-mode too.