文本动画代码失效排查：animation属性行无法正常运行

你的代码里动画无法运行的核心原因是拼写错误：animation属性里的infinte写错了，正确拼写是infinite。浏览器无法识别这个错误的关键字，导致整个动画声明失效。

修正后的完整代码如下：

CSS 代码 #

body {
  background-color: black;
}

.selector {
  font-size: 72px;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: 0 -200px;
  /* 修正拼写错误：infinte → infinite */
  animation: backcolor 5s linear infinite alternate;
}

@keyframes backcolor {
  100% {
    background-position: 0 0;
  }
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    /* 上述CSS代码可放在此处 */
  </style>
</head>

<body>
  <h1 class="selector">Stack Overflow</h1>
</body>

</html>

额外提示：为了兼容更多浏览器，建议同时添加标准写法的background-clip: text;，目前主流浏览器已支持该标准属性。

内容的提问来源于stack exchange，提问作者Sabeel Mansoof