Как я могу создать плавный градиентный фон анимации?

Question

Я создал div с градиентным фоном, и я хочу изменить этот градиент.Я применил анимацию ключевых кадров, которая мгновенно меняла цвет фона.Как я могу сделать это изменение плавным?

div {
    width: 100px;
    height: 100px;
    background:linear-gradient(red, yellow);
    animation-name: colorchange;
    animation-duration: 5s;
    -webkit-animation-name: colorchange;
   animation-iteration-count: 5;
    -webkit-animation-duration: 5s;
    text-align: center;
}
@keyframes colorchange {
    0% {background:linear-gradient(red, yellow) }
    35% {background:linear-gradient(yellow, green) }
    70% {background:linear-gradient(green, red) }
    100%{background:linear-gradient(red, yellow)}
}

<div>
Gradient Background
</div>

Answer 1

Попробуйте это

    div {
        text-align: center;
        width: 100px;
    	height: 90px;
    	color: #fff;
    	background: linear-gradient(0deg, red, yellow, green);
    	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: 50% 0%
    	}
    	50% {
    		background-position: 50% 100%
    	}
    	100% {
    		background-position: 50% 0%
    	}
    }

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

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

<div> Text </div>

Answer 2

Насколько мне известно, плавный переход не работает с градиентным фоном, только с прямыми цветами.

Вы можете создать большой градиентный фон с множеством цветов и использовать переход к переместить его.Это создает иллюзию смены цветов.

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

h1,
h6 {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}

<h1>Hello World!</h1>

Answer 3

Я могу ошибаться, но градиенты не поддерживают переходы.

В другом связанном вопросе я нашел обходной путь: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759