Blending mode not working after page load animation

The issue is resolved after 1 hour of searching and messing around but I just want to make a post to know exactly what the problem is.

So, I got a blend mode on the Heading that overlaps the image below it and the whole section will slowly appear on the site after loading. Everything normal on the design mode, but on the preview mode and after publishing, the blending mode disappears after the page load animation finishes. After messing around, I noticed that the blending mode is there all the way through the animation until the animation finishes and it disappears. I decided to change the animation’s final opacity to not 100% but 99% and it worked!

Somehow, on the 100% opacity, the page load animation makes the blending mode disappear. This bugs me even though the problem solved. So would appreciate for an explanation on this.

Here is my public share link: LINK