css - 如何为背景剪辑的线性渐变设置动画

Question

我正在尝试将 background-clip 的 linear-gradient 从 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 );
  }
};

参见 JSFiddle

Answer 1

您不能为 background-image 设置动画。相反，您可以为 background-size 设置动画，使渐变平滑地填充 100% 的高度:

.train {
  font-size:35px;
  font-weight:900;
  animation: progress-bar 5s infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: #bc2122;
  background-image: linear-gradient(to top, #67A062 0%, #67A062 60%, #bc2122 60%, #bc2122 100%);
  background-size: 100% 0%;
  background-position:bottom;
  background-repeat: no-repeat;
}

@keyframes progress-bar {
  from {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 0%;
  }
  to {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 100%;
  }
}

;

<div class="train">
Text
</div>