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

Question

所以我正在为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;

Answer 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%;
    }
}