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

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

HTML代码:

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