I'm trying to make a CSS marquee with text that fades in from the right edge and fades out from the left edge. Only the edges of the letters should become transparent. I call this the "Opacity Mask" and feather it to the left/right edges.

I can find CSS marquee code examples, but none have a fade in/out effect like this. I also want the background to be completely transparent and only the text to have an edge effect.

I tried adding a gradient to the container, but in hindsight that doesn't seem to be the right path. Below is the code I've come up with so far. Please help, thank you!

@Bernard Borg: I've updated my code with a second new example. Beyond that, no opacity is used - so A) relying on hardcoding to the underlying background color and B) only working on a solid color background - which is acceptable for my use case. Thanks! (Any idea how to overlay the marquee with opacity instead of color?)

div#container {
  width: 60%;
  height: 100%;
  position: absolute;
  background-color: #e6e9eb;
}

div#marquee-container {
  overflow: hidden;
}

p#marquee {
  animation: scroll-left 10s linear infinite;
}
            
@keyframes scroll-left {
  0%   {transform: translateX( 140%)}
  100% {transform: translateX(-140%)}
}

div#marquee-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to right, rgba(230, 233, 235, 1) 0%, rgba(230, 233, 235, 0) 15%, rgba(230, 233, 235, 0) 85%, rgba(230, 233, 235, 1) 100%);
}

<div id="container">
  <div id="marquee-container">
    <p id="marquee">The quick brown fox jumps over the lazy dog</p>
    <div id="marquee-cover"/> <!--thanks Bernard Borg-->
  </div>
</div>