CSS Marquee avec transition fondu d'entrée/fondu de sortie

Question

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>

Answer 1

Animer la propriété opacité (nettoyer le code pour une meilleure lisibilité) ;

body {
  margin: 0;
}

div#marquee-container {
  width: 600px;
  height: 150px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
}

p#marquee {
  text-align: right;
  animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left {
  0% {
    opacity: 0;
  }
  
  20% {
     opacity: 1;
  }
  
  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(-80%);
    opacity: 0;
  }
}

  

    
Testing
  

Remarque : vous n'avez plus besoin du préfixe du fournisseur pour les animations.

Answer 2

Pour tous ceux qui seront confrontés à cette question à l'avenir, la réponse à cette question est un effort commun. Trouvez la réponse dans la question.

C'est ce qui se rapproche le plus de votre question mise à jour ;

body {
  margin: 0;
}

#container {
  width: 100%;
  height: 100vh;
  background-color: grey;
  display: flex;
  align-items: center;
}

#marquee-container {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

p#marquee {
  font-family: 'Segoe UI', sans-serif;
  font-size: 30px;
  font-weight: bold;
  height: 80%;
  animation: scroll-left 5s linear infinite;
  white-space: nowrap;
}

#first-cover,
#second-cover {
  height: 100vw;
  backdrop-filter: opacity(50%);
  width: 30vw;
  z-index: 100;
}

#first-cover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2));
}

#second-cover {
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2));
}

@keyframes scroll-left {
  0% {
    transform: translateX(130%);
  }
  100% {
    transform: translateX(-130%);
  }
}

  

    

    
The quick brown fox jumps over the lazy dog