CSS Marquee dengan peralihan fade-in/fade-out

Question

Saya cuba membuat tenda CSS dengan teks yang pudar masuk dari tepi kanan dan pudar keluar dari tepi kiri. Hanya bahagian tepi huruf hendaklah menjadi lutsinar. Saya memanggilnya sebagai "Topeng Opacity" dan meletakkannya di tepi kiri/kanan.

Saya boleh menemui contoh kod tenda CSS, tetapi tiada satu pun yang mempunyai kesan fade in/out seperti ini. Saya juga mahu latar belakang benar-benar telus dan hanya teks yang mempunyai kesan kelebihan.

Saya cuba menambah kecerunan pada bekas, tetapi apabila difikirkan semula itu tidak kelihatan seperti laluan yang betul. Di bawah ialah kod yang saya buat setakat ini. Tolong bantu, terima kasih!

@Bernard Borg: Saya telah mengemas kini kod saya dengan contoh baharu kedua. Selain daripada itu, kelegapan tidak digunakan - dan oleh itu A) bergantung pada pengekodan keras kepada warna latar belakang asas, dan B) hanya berfungsi pada latar belakang warna pepejal - yang boleh diterima untuk kes penggunaan saya. Terima kasih! (Ada idea bagaimana untuk menindih marquee dengan kelegapan dan bukannya warna?)

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

Animasikan sifat kelegapan (bersihkan kod untuk kebolehbacaan yang lebih baik);

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
  

Nota sampingan: Anda tidak lagi memerlukan awalan vendor untuk animasi.

Answer 2

Bagi sesiapa yang menghadapi soalan ini pada masa hadapan - jawapan kepada soalan ini adalah usaha bersama. Cari jawapan dalam soalan.

Ini adalah yang paling hampir saya dapat dengan soalan anda yang dikemas kini;

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