javascript - 在不卡住动画的情况下更改 css 线性渐变动画

Question

我的网站有一个线性渐变动画，我想要主题，所以我尝试使用 javascript 来更改 css 中的颜色，我让它做某事，但当我这样做时它卡住了动画。

function changeBackground() {
   document.body.style.background = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
 }

body {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
    }

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

    @-moz-keyframes Gradient {
	    0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
    }

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

  <a onclick="changeBackground()">Default</a>
  <a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.

Answer 1

仅更改 background-image 而不是整个 background。更改背景将覆盖 background-size 并卡住动画。最好在 CSS 中定义 background-image 以避免其他问题。

您还可以去掉前缀版本并简化动画，如下所示:

function changeBackground() {
  document.body.style.backgroundImage = "linear-gradient(-45deg, blue,red)";
}

body {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
  0%,100% {
    background-position: left
  }
  50% {
    background-position: right
  }
}

<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.

您可以查看此答案以了解简化并了解更多详细信息，以防您需要不同的动画:https://stackoverflow.com/a/51734530/8620333