Is there any way to make the blend-mode rule to work in tandem with CSS animation?

Question

I'm encountering an issue when I try to apply the animation CSS rule in tandem with the blend mode.

If I'm using the mix-blend-mode without the animation rule (animation: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal both running alpha_buildIn;) everything is working fine, I'm not sure why maybe I'm doing something wrong or might be an issue.

In my example, I've used a keyframe to define the CSS animation which later is going to be applied to the parent element which had the image context where I'm using the mix-blend-mode: color rule.

I bet on animation-fill-mode both could cause the issue but I'm not sure why.

All help is appreciated!

@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;
}

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