how to switch background gradient smoothly-CodePudding

trying to change background gradient smoothly from gold-orange - to orange-gold and vice versa

problem - colors are changed suddenly, jumping from one to another

pls help

.box {
  width: 140px;
  height: 50px;
  background: linear-gradient(to right, gold, orange);
  animation: back infinite;
  animation-duration: 7s;
}

@keyframes back {
  0% {
    background: linear-gradient(to right, gold, orange);
  }
  50% {
    background: linear-gradient(to left, gold, orange);
  }
  100% {
    background: linear-gradient(to right, gold, orange);
  }
}

<div class='box'></div>

CodePudding user response：

You can increase background-size and use background-position for the animation

.box {
  width: 140px;
  height: 50px;
  background: linear-gradient(to right, gold, orange, gold);
  animation: back ease infinite;
  animation-duration: 7s;
  background-size: 200% 200%;
}

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

<div class='box'></div>