페이드 인/페이드 아웃 전환이 포함된 CSS 선택 윤곽

Question

오른쪽 가장자리에서 페이드 인되고 왼쪽 가장자리에서 페이드 아웃되는 텍스트로 CSS 선택 윤곽을 만들려고 합니다. 글자의 가장자리만 투명해져야 합니다. 나는 이것을 "불투명 마스크"라고 부르고 왼쪽/오른쪽 가장자리에 페더를 적용합니다.

CSS 마퀴 코드 예제를 찾을 수 있지만 이와 같은 페이드 인/아웃 효과는 없습니다. 또한 배경은 완전히 투명하고 텍스트에만 가장자리 효과가 있기를 원합니다.

컨테이너에 그라디언트를 추가하려고 했지만 돌이켜보면 올바른 경로가 아닌 것 같습니다. 아래는 지금까지 제가 생각해낸 코드입니다. 도와주세요, 감사합니다!

@Bernard Borg: 두 번째 새로운 예제로 코드를 업데이트했습니다. 그 외에는 불투명도가 사용되지 않습니다. 따라서 A) 기본 배경색에 대한 하드코딩에 의존하고 B) 단색 배경에서만 작동합니다 - 이는 제 사용 사례에 적합합니다. 감사해요! (색상 대신 불투명도로 선택 윤곽을 오버레이하는 방법을 아시나요?)

으아악 으아악