background-color实现渐变过渡

css

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

.box:hover {
	background-color: purple;
}

html