background-image为渐变色，transition无效

问题：在下面的代码中，实现渐变色背景的切换时，使用transition属性没有效果：

<div class="out">
	<div class="div1"></div>
</div>

.div1 {
	width: 50px;
	height: 50px;
	background-image: linear-gradient(135deg, rgb(247, 251, 255), rgb(235, 242,249));
	transition: background-image 2s ease;
}
.div1:hover {
	background-image: linear-gradient(180deg, rgb(255, 246, 236) 0%, rgb(254, 226, 195) 50%, rgb(225, 209, 110) 51%, rgb(255, 255, 196) 100%);
}

解决方法：可以在后面再加一个div，调整它的样式让两个div重合，并设置第二个div的透明度为0，通过设置transition-property: opacity; 来实现渐变色背景切换的动画。

<div class="out">
	<div class="div1"></div>
	<div class="div2"></div>
</div>

.div1 {
	width: 50px;
	height: 50px;
	background-image: linear-gradient(135deg, rgb(247, 251, 255), rgb(235, 242,249));
}
.out {
	position: relative;
}
.div2 {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	opacity: 0;
	transition: opacity 2s ease;
	background-image: linear-gradient(180deg, rgb(255, 246, 236) 0%, rgb(254, 226, 195) 50%, rgb(225, 209, 110) 51%, rgb(255, 255, 196) 100%);
}
.div2:hover {
	opacity: 1;
}