background-image 是不支持 CSS3 的transition过渡效果的，而CSS3 gradient 渐变作为背景图片存在的时候， 下面的CSS不会有过渡效果

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

.box {
    height: 300px;
    width: 400px;
    background-image: linear-gradient(to right, olive, green);
    transition: background-image 0.5s linear;
.box:hover {
    background-image: linear-gradient(to right, green, purple);
当鼠标hover划过的时候，会发现变化很唐突，一点过渡效果都没有，你可以 点击这里查看
那么，如果我们希望实现当hover的时候有渐变效果，该如何实现呢？
一、借助 background-position 实现渐变效果
background-image 虽然不支持 CSS3 transition 过渡，但是background-position 支持，于是，可以通过控制背景位置来实现过渡效果
.box {
    width: 400px;
    height: 300px;
    background: linear-gradient(to right, olive, green, purple);
    background-size: 200%;
    transition: background-position .5s;    
.box:hover {
    background-position: 100% 0;    
你可以点击这里查看效果
二、借助 background-color 实现渐变效果
background-color 也是支持 CSS3 transition效果的， 于是，可以通过控制背景颜色，和一个颜色显示技巧，也可以实现渐变过渡效果。
.box {
    width: 400px;
    height: 300px;
    background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5));
    transition: background-color .5s;    
.box:hover {
    background-color: purple;    
你可以点击这里查看效果
三、借助伪元素和opacity 实现渐变效果
借助伪元素创建变化后的渐变效果，通过改变覆盖的 opacity 透明度变化来实现渐变效果
.box {
    max-width: 400px; height: 200px;
    background: linear-gradient(to right, olive, green);
    position: relative;
    z-index: 0;    
.box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, green, purple);
    opacity: 0;    
    transition: opacity .5s;
    z-index: -1;
.box:hover::before {
    opacity: 1;    
你可以点击这里查看效果