Изменение анимации линейного градиента 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

Во-первых, поскольку ваш тег "a" действует как кнопки, а не как привязки, вы должны использовать элемент button.Во-вторых, создайте класс с желаемыми цветами фона и запустите его с помощью события onclick.(кстати ширина тела должна быть на vw, а не на том, что вы написали)

function changeBackground() {
   document.body.classList.add('changeBackground');
 }

body {
width: 100vw;
height: 90vh;
color: #fff;
background-image: 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%
}
}
.changeBackground {
background-image: linear-gradient(-45deg, yellow, blue, red, green);
}

<button onclick="changeBackground()">Default</button>

*** Еще один подход.

Удачи!

Answer 2

Исправление

Это потому, что вы переопределяете значения вашей анимации.В CSS встроенные стили имеют более высокую специфичность , чем связанные стили, а атрибут background является сокращением, которое устанавливает как background-image, так и background-position.Стили, которые вы применяете через JavaScript, устанавливают новые значения с более высокой специфичностью , чем ваши ключевые кадры анимации.Чтобы это исправить, установите backgroundImage вместо background.

function changeBackground() {
   document.body.style.backgroundImage = "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.

Улучшенный подход

Еще лучше - используйте CSS-классы для применения изменений в стилях, а не с помощью JavaScript и избежания специфичностибитва в целом.Вот как CSS предназначен для использования.

Также стоит упомянуть, что <button> является более подходящим элементом для поведения, поскольку якоря предназначены для отправки пользователя куда-либо.

Хотя, если вы извлекаете значения линейного градиента программным путем, это может не подойти.

function setDefault() {
  document.querySelector('body').setAttribute('class', '');
};

function clickHandler() {
  document.querySelector('body').classList.add('fire');
};

body {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background-image: 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;
}

.fire {
  background-image: linear-gradient(-45deg, #ff0000, #efefef, #ff0000, #efefef);
}

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

<button onclick="setDefault()" tyle="button">Default</buttopn>
<button onclick="clickHandler()" tyle="button">Fire</buttopn>

Answer 3

Измените только background-image, а не все background.Изменение фона переопределит background-size и остановит анимацию.Лучше определить background-image в CSS, чтобы избежать других проблем.

Вы также можете избавиться от префиксных версий и упростить анимацию, как показано ниже:

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