Experimenting with animated text fills

[assembly21]

I have this first example of an animated text fill. And I’d like some help to understand the background size in the .illustrations and the background-position in the keyframes.

The code is this:

<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800' rel='stylesheet' type='text/css'>
<div class="illustrations animated-text-fill">
  Trends
</div>
/* Main styles */

body {
  overflow: hidden;
  background: #f6f5eb;
  color: #FFF;
}

.illustrations {
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  font: bold 27vmax/.8 'Alegreya Sans SC', sans-serif;; 
}

.animated-text-fill {
  background-image: -webkit-linear-gradient(orangered 50%, green 50%);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 100% 50px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: stripes 2s linear infinite;
  animation: stripes 2s linear infinite;
}

/* With minus the effect moves up, positive moves down */

@-webkit-keyframes stripes {
  100% {
    background-position: 20px 50px;
  }
}
 
@keyframes stripes {
  100% {
    background-position: 20px -50px;
  }
}

The demo is here: http://codepen.io/CarolinaSawney/pen/jPjVdd

Please ignore my post below, it’s a mistake and I can’t delete it.

Thanks in advance.

[PaulOB]

Hi,

The background-position determines where the linear gradient will start so by moving it from 50px to -50px in the keyframe the gradient will animate between those 2 points resulting in the effect that you see.

@-webkit-keyframes stripes {
  100% {
    background-position: 20px 50px;
  }
}
 
@keyframes stripes {
  100% {
    background-position: 20px -50px;
  }
}