CSS gradient text that fades in and out

Question

Here I have a basic text gradient effect which fades into a gradient animation, and fades out of the animation on hover in/out. Without the fade in, it looks janky and jolty. But because of the fade-in/out, I had to add two layers, one with the visible text "by default", and one with the overlay animation layer, which is always animating but is invisible until hover over, then it fades the animation in.

.container {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  font-size: 60px;
}

.base {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: red;
  background: linear-gradient(315deg, red 0%, green 74%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

.overlay:hover {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}


@keyframes shine {
  to {
    background-position: 200% center;
  }
}

<span class="container">
  <span class="base">a</span>
  <span class="overlay">a</span>
</span>

However, itt is still a little jolty at the edges of the animation. And I am using this on 200+ elements on a page, causing my computer to start spinning the fans up.

Basically I want to be able to use this for <a> links, for random header texts, for table header text, etc.. I am using React so have reusable components.

.box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  font-size: 60px;
}

.container2 {
  position: relative;
}

.base {

}

.overlay {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: red;
  background: linear-gradient(315deg, red 0%, green 74%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

.overlay:hover {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}


@keyframes shine {
  to {
    background-position: 200% center;
  }
}

<div class="box">
  <span class="container">
    <span class="base">a</span>
    <span class="overlay">a</span>
  </span>
</div>

And hello 
  <span class="container2">
    <span class="base">world</span>
    <span class="overlay">world</span>
  </span>

Is there any way I can make this more performant or optimized? It's also jolting in the animation, is there a way to make that smooth?

Answer 1

I see that your code can be shortened and the terrible double tags removed. For the smoothness of the gradient, I just looped it - I hope I understood the idea correctly.

.box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  font-size: 60px;
}

.container2 {
  position: relative;
}

.overlay:hover {
  background-color: red;
  background: linear-gradient(315deg, red 0%, green 37%, red 100% );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

<div class="box">
  <span class="container">
    <span class="overlay">a</span>
  </span>
</div>

And hello 
  <span class="container2">
    <span class="overlay">world</span>
  </span>