Trying to animate knock out text gradient on CodePen - html

Question

This might just be a matter of it not being possible but here is my CodePen link https://codepen.io/Spectral/pen/QgMdbM?editors=1100
I can't make the gradient animate, am I doing something wrong or is this just not possible?
code:
<h1 class='knockout'>This text should be animated!</h1>
body{background:#fdf}
.knockout{
margin:50px 0 0 0 auto;
font-family:sans-serif;
color:blue;
/* gradient*/
background: linear-gradient(4deg, #4a6bbd, #b65181, #3c636c);
/* animation */
-webkit-animation: gradientAnimation 4s ease infinite;
-moz-animation: gradientAnimation 4s ease infinite;
-o-animation: gradientAnimation 4s ease infinite;
animation: gradientAnimation 4s ease infinite;
#-webkit-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-moz-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-o-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
/* knockout*/
background-size:cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
font-size:20vw;
text-align:center;
/* stroke*/
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #010;
}

Answer 1

The #keyframes {} block of code must be written outside the .knockout {} block of code, rather than within it. Here is an example of the background gradient working:
https://codepen.io/anon/pen/PjJoym?editors=1100
(I removed the #-webkit, #-moz, #-o code to simplify this demonstration)

Answer 2

I don't know if this is exactly what you were looking for, and its a little complicated, but I just added your code to an existing sample of mine. Maybe you could do something with it, I kinda gave up on it.
https://codepen.io/MikeIke/pen/xrgvEW
<div class="header">
<h1>Animated Fixed Knockout Text Example(Work In Progress)</h1>
<h3>Scroll down to see</h3>
</div>
<div id="profile">
<div class="section">
<div id="knock1">
<div id="knock2">
<div class="sectionTitle" id="profileTitle">TEXT</div>
</div>
</div>
</div>
</div>