Css 如何设置背景剪辑的线性渐变动画

我正在尝试将

背景剪辑的
线性渐变
从0%设置为{0-100}%

这是我的CSS，但不幸的是，它没有在百分比之间设置动画，只是在5秒后更改为百分比：

.train{
    -webkit-animation: progress-bar 5s;
    -moz-animation: progress-bar 5s;
    animation: progress-bar 5s;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: #bc2122;
}

@keyframes progress-bar {
  from {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: -moz-linear-gradient(bottom, #67A062 0%, #67A062 0%, #bc2122 0%, #bc2122 100%);
    background: -webkit-linear-gradient(bottom, #67A062 0%,#67A062 0%,#bc2122 0%,#bc2122 100%);
    background: linear-gradient(to top, #67A062 0%,#67A062 0%,#bc2122 0%,#bc2122 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#67A062, endColorstr=#bc2122,GradientType=0 );
  }
  to {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: -moz-linear-gradient(bottom, #67A062 0%, #67A062 60%, #bc2122 60%, #bc2122 100%);
    background: -webkit-linear-gradient(bottom, #67A062 0%,#67A062 60%,#bc2122 60%,#bc2122 100%);
    background: linear-gradient(to top, #67A062 0%,#67A062 60%,#bc2122 60%,#bc2122 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#67A062, endColorstr=#bc2122,GradientType=0 );
  }
};

请参见
您无法设置背景图像的动画。相反，您可以设置背景大小的动画，使渐变平滑地填充100%的高度：


.train{
字体大小：35px；
字号：900；
动画：进度条5s无限；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
背景色：#bc2122；
背景图像：线性渐变（到顶部，#67A062 0%，#67A062 60%，#bc2122 60%，#bc2122 100%）；
背景大小：100%0%；
背景位置：底部；
背景重复：无重复；
}
@关键帧进度条{
从{
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
背景大小：100%0%；
}
到{
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
背景大小：100%100%；
}
}
;

正文
最好的选择是使用SVG。您可以设置文本填充渐变的动画，动画像丝绸一样平滑，并且它将比用于设置图标样式的
背景剪辑：text
具有更好的浏览器支持


/*主要样式*/
@导入url(http://fonts.googleapis.com/css?family=Open+Sans:800）；
.文本{
填充：url（#gr径向）；
}
/*其他风格*/
html，正文{
身高：100%；
}
身体{
背景：#222；
字体：14.5em/1开放式SAN，影响；
文本转换：大写；
保证金：0；
}
svg{
位置：绝对位置；
宽度：100%；
身高：100%；
}

正文
背景图像
不可设置动画。对不起，我在哪里使用
背景图像
？检查你的Chrome元素，点击
背景的下拉列表：…
并查看你的
线性渐变
在哪里应用。你如何“点击背景的下拉列表”？啊，好吧，它将作为动画应用，因此不会显示在元素本身上<代码>线性渐变
在
背景
中用作速记时应用/分配到
背景图像
。