CODEWITHSUNDEEP
csscss-animationslinear-gradients
Marek Cmarko
Marek Cmarko

Reputation: 73

How to animate Text gradient using CSS?

i am using this CSS3 text shine gradient animation on my website (http://marekcmarko.xyz), but it keeps blinking if u scroll over the site and stop on headings where it's applied:

.textShineBlack {
background: linear-gradient(to right, #000 20%, #bada55 30%, #bada44 70%, #000 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 200% auto;
animation: textShine 7s ease-in-out infinite;


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

Does any1 know what should i do to get rid of that blinking ? I have no idea...I can't make screenshot of this - dunno if its even possible.

Upvotes: 2

Views: 9296

Answers (1)

Temani Afif
Temani Afif

Reputation: 272909

The issue is that you made the animation to infinite so when it will end it will restart immediately for the initial state. To avoid this you can add alternate to the animation:

.textShineBlack {
  background: linear-gradient(to right, #000 20%, #bada55 30%, #bada44 70%, #000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  animation: textShine 7s ease-in-out infinite alternate;
}

@keyframes textShine {
  to {
    background-position: 200%;
  }
}
<h1 class="textShineBlack">SOME text</h1>

Upvotes: 4

Related Questions