html - 尝试在 CodePen 上制作动画淘汰文本渐变

Question

这可能只是不可能的问题，但这是我的 CodePen 链接 https://codepen.io/Spectral/pen/QgMdbM?editors=1100

我无法使渐变动画化，是我做错了什么还是这根本不可能？

代码:

    <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

@keyframes {} 代码块必须写在 .knockout {} 代码块之外，而不是在其中。这是背景渐变工作的示例:

https://codepen.io/anon/pen/PjJoym?editors=1100

(我删除了@-webkit、@-moz、@-o 代码以简化此演示)