过渡背景图片

Question

我试图将鼠标悬停在盒子上时添加过渡效果。 由于背景图片不可设置动画，因此无法为其添加过渡效果。 有解决方法吗？

HTML部分

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

CSS部分

.box {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  background-image: linear-gradient(to right, blue, red);
  transition: all 3s; /*NOT WOKRING*/
 }

.box:hover {
  background-image: linear-gradient(to right, red, blue);
 }

Codepen example