Одна работа заключается в том, чтобы переместить положение фона, чтобы эффект изменения градиента: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
Переход градиента CSS3 с фоновой позицией
Хотя вы не можете напрямую изменять градиенты с использованием свойства перехода CSS, можно анимировать фоновый рисунок, position для достижения простой градиентной анимации:
Код для этого прост:
blockquote>
#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }