给div加一个移入后显示渐变色，但是transition过渡效果缺没生效

Question

问题如题：
代码如下:
html:

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

css:

.box{
    width: 100px;
    height:100px;
    background: #fff;
    -webkit-transition: all 0.4s cubic-bezier(.4,0,.2,1) 0s;
    -moz-transition: all 0.4s cubic-bezier(.4,0,.2,1) 0s;
    -ms-transition: all 0.4s cubic-bezier(.4,0,.2,1) 0s;
    -o-transition: all 0.4s cubic-bezier(.4,0,.2,1) 0s;
    transition: all 0.4s cubic-bezier(.4,0,.2,1) 0s;
}
.change {
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#6E45E2),to(#88D3CE));
}

js代码如下:

$('.venueModel').on('mouseover',function () {
    $(this).addClass('change');
}).on('mouseleave',function () {
    $(this).removeClass('change');
});

其中：transition没生效。。。求解!在线等！急！

Answer 1

渐变和transition不能同时用吧

Answer 2

.....我觉得楼上好像没说到重点.....

你先弄清楚transition变的当然是同一属性的样子咯。
background: #fff 等价于 background-color: #fff
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#6E45E2),to(#88D3CE)); 等价于 background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(#6E45E2),to(#88D3CE));

它们并不是同一属性，transition没有用不是很正常吗？

Answer 3

transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的),可以结合opacity使用

Answer 4

可以看看这个帖子 “使用渐变背景的CSS3过渡”