CSS3 线性渐变背景的过渡效果

对于background-color，可以直接transition: background-color 2s就能实现过渡效果，但对于background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);就无能为力了。对于这种复杂的背景，只能给opacity添加过渡效果了，当做背景图片处理。

首先，设置过渡的几种状态：

   <div class='box'>
        <!--状态1-->
        <div class='state state1'></div>
        <!--状态2-->
        <div