J'essaie de créer un chapiteau CSS avec du texte qui apparaît en fondu à partir du bord droit et disparaît à partir du bord gauche. Seuls les bords des lettres doivent devenir transparents. J'appelle cela le "Masque d'opacité" et je l'applique sur les bords gauche/droit.

Je peux trouver des exemples de code de sélection CSS, mais aucun n'a un effet de fondu entrant/sortant comme celui-ci. Je souhaite également que l'arrière-plan soit complètement transparent et que seul le texte ait un effet de bord.

J'ai essayé d'ajouter un dégradé au conteneur, mais avec le recul, cela ne semble pas être la bonne voie. Vous trouverez ci-dessous le code que j'ai trouvé jusqu'à présent. S'il vous plaît, aidez-moi, merci !

@Bernard Borg : J'ai mis à jour mon code avec un deuxième nouvel exemple. En dehors de cela, l'opacité n'est pas utilisée - et donc A) repose sur le codage en dur de la couleur d'arrière-plan sous-jacente, et B) ne fonctionne que sur des arrière-plans de couleur unie - ce qui est acceptable pour mon cas d'utilisation. Merci! (Une idée sur la manière de superposer une zone de sélection avec de l'opacité au lieu de la couleur ?)

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>