给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&nbsp;等价于&nbsp;background-color: #fffbackground: -webkit-gradient(linear, 0 0, 100% 100%, from(#6E45E2),to(#88D3CE));&nbsp;等价于&nbsp;background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(#6E45E2),to(#88D3CE));它们并不是同一属性，transition没有用不是很正常吗？