CSS animation fill text right to left

November 1, 2023

Currently, I’ve got the animation working. Except it got the background retained. So for example, if I implement this component on some other component that has a background image or opacity this black color is off-putting.

My question is how to remove the black color from the component?

I’m open to alternative ways to do the animation. (I’m looking for a general CSS solution. Tailwind or Vue3 solution is welcomed)

.content {
  display: table;
  color: white;
  background: black;
  mix-blend-mode: multiply;
}

.container {
  margin: auto;
  background: linear-gradient(#FFB800, #FFB800) transparent no-repeat 100% 0;
  background-size: 100% 100%;
  animation: stripes 2s linear infinite;
}

@keyframes stripes {
  0% {
    background-size: 0 100%;
  }
  50% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 0% 100%;
  }
}

.parent {
  float: left;
}

<div class="parent">
  <div class="container">
    <div class="content">
      PROBLEM
    </div>
  </div>
</div>

>Solution :

Color only the text using background-clip: text

.content {
  color: #0000;
  font-size: 25px;
  font-weight: bold;
  
  background: linear-gradient(#FFB800 0 0) right/0 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  animation: stripes 2s linear infinite;
}

@keyframes stripes {
  50% {
    background-size: 100% 100%;
  }
}