Как мне анимировать градиент фона в соответствии со значением? - PullRequest
Новая
       37

Как мне анимировать градиент фона в соответствии со значением?

0 голосов
/ 23 октября 2019

Итак, я создаю виджет для потоковых меток, в настоящее время я пытаюсь выяснить, как анимировать CSS "background: linear-Gradient (# cf8888 -5%, # df4747 100%);"в соответствии с% высоты от этого деления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;

1 Ответ

0 голосов
/ 23 октября 2019

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>
...