我应该如何根据值对背景渐变进行动画处理？答案

【问题标题】：How should I go about animating a background gradient according to a value?我应该如何根据值对背景渐变进行动画处理？
【发布时间】：2019-10-23 08:49:03
【问题描述】：

所以我正在为 streamlabs 创建一个小部件，目前我正在尝试弄清楚如何为 css 设置动画“背景：线性渐变（#cf8888 -5%，#df4747 100%）；”根据这个div的高度百分比。 javascript 已经根据当前的“目标”控制了 div 的高度。

有什么建议我应该从哪里开始为这个 BG 制作动画？

IE 示例：

<div class="goal-start"></div>

#goal-start{
  position: absolute;
    background: linear-gradient(#cf8888 -5%, #df4747 100%);
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;

【问题讨论】：

在这里创建了样本小提琴jsfiddle.net/rakeshnayak/q6j5axcf

标签： javascript html css jquery-animate gradient

【解决方案1】：

CSS

.goal-start{
  width:100%;
  height:100vh;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
    background-size: 400% 400%;
    -webkit-animation: gradientBG 10s ease infinite;
            animation: gradientBG 10s ease infinite;
}

@-webkit-keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

HTML 代码：

<div class="goal-start"></div>

【讨论】：

谢谢，我想我可以交替使用此代码以在高度百分比增加时触发。