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

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>

Answer 2

最好的选择是改用 SVG。您可以为文本填充渐变设置动画，动画像丝绸一样光滑，而且它 浏览器支持 比您用来设置该图标样式的 background-clip:text 好得多。

/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: url(#gr-radial);
}

/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #222;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

<svg viewBox="0 0 600 300">

  <!-- Gradient -->
  <radialGradient id="gr-radial"
                  cx="50%" cy="50%" r="70%"
                  >
    <!-- Animation for colors of stop-color -->
    <stop stop-color="#FFF" offset="0">
      <animate attributeName="stop-color" 
               values="#bc2122;#67A062;#bc2122;"
               dur="5s" repeatCount="indefinite" />
    </stop>
    <stop stop-color="rgba(55,55,55,0)" offset="100%"/>
  </radialGradient>

  <!-- Text -->
  <text text-anchor="middle"
        x="50%"
        y="50%"
        dy=".35em"
        class="text"
        >
    Text
  </text>
</svg>

目前我对 SVG 的理解非常有限（正在研究它 ;)），所以这是一个公然的复制粘贴，但我认为它有助于展示这个想法并且花一点时间阅读你的规范将能够将它用于您的图标 ;)

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

How to animate linear gradient of the background clip

css

linear-gradients