background-position实现渐变过渡

前言：前辈的想法总是那么出乎意外，background-size:200%,背景色是两个单位的位置

CSS

* {
	margin: 0;
	padding: 0;
}
.box {
	max-width: 400px;
	height: 200px;
	background: linear-gradient(to right, red, green, #024);
	background-size: 200%;
	transition: background-position .5s;
}

.box:hover {
	background-position: 100% 0;
}

HTML

<div class="box">
</div>