CSS3过渡属性不适用于线性渐变背景

Question

我试图在背景线性渐变上添加转换，但它无法正常工作。如何修复它？

＆＃13;

＆＃13;

.each-candidates {     
  text-align: center;
  width: 265px;
  height: 310px;
  background: linear-gradient(to bottom , #db2431, purple);  
}

.background2 {
  background: linear-gradient(to bottom , purple,#db2431);   
  opacity: 0;
  transition: opacity 1000ms;
  -webkit-transition: opacity 1000ms;
}

.background2:hover {
  opacity: 1;
}

＆＃13;

<div class="each-candidates">
  <div class="each-candidates background2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是链接http://jsfiddle.net/AashirKhan/7gxnr7cb/8/