给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没有用不是很正常吗？