Can't stop opacity animation at 50%

Both of these blocks are .sqs-shapes.  I have two different colors on each shape that I want to fade in but only up to 50%.  The problem is they keep going to 100% and I can't for the life of me figure out why?   I read something about jQuery and using fadeTo{} but that looked complicated for what I want.  I know the opacity can be at 50% because when I remove the animation and just use 50% it works.  But I have the blocks on top of a video that gives it a cool affect.  See video attached.

The only reason I'm having it fade in is because when the page loads the shapes load before the video so you see this start pink/blue color and then the video comes on.  Thanks.

moetalks.com/home

PW 2024

#block-9d6cf7bb31c4ae46e470, #block-42eab21575a620f1535a  {
animation: fade-me-in 10s;
}
@keyframes fade-me-in {
  0% {opacity:0;}
  50% {opacity:1;}
}

12 hours ago, MoeTalks said:

50% {opacity:1;}

You need to set the opacity to 50% not the animation. Use this:

#block-9d6cf7bb31c4ae46e470, #block-42eab21575a620f1535a  {
  animation: fade-me-in 10s;
}
@keyframes fade-me-in {
  0% {opacity:0;}
  100% {opacity:0.5;}
}

Good Morning @Ziggy.  Thank you for that.  It did not work until I modified it by adding .sqs-shape to it since the colors are shapes.  Once I did that your original CSS worked perfectly, but with one caveat and maybe you have some insight on this.  On yours at 10s, the 50% color just popped in at 0.5.  I could clearly see that it was fading in but at that last keyframe, bam, 0.5.  I've tried the below thinking that every 1s would increase the fade in by 20% so that the last keyframe wouldn't have that visible contrast.  Is there a way to better fade that in or is this the best under the circumstances.  20% could very well make a difference in the fade so not a big deal if it is the best for right now.  And thanks again for pointing me in the right direction. 

#block-9d6cf7bb31c4ae46e470 .sqs-shape, #block-42eab21575a620f1535a .sqs-shape {
  animation: fade-me-in 6s;
}
@keyframes fade-me-in {
  0% {opacity:0;}
  20% {opacity:0.1;}
  40% {opacity:0.2;}
  60% {opacity:0.3;}
  80% {opacity:0.4;}
  100% {opacity:0.5;}
}