Как сделать анимацию для градиента с прозрачностью?

Не могу найти решения одного интересного момента.
Задача:
Сделать градиентную кнопку с разными уровнями прозрачности (например, сверху 70%, снизу 20%), при наведении прозрачность должна меняться (100%, 50%). Переход должен быть анимирован.
Но с градиентом анимация у меня не работает.

.button {
	background: -webkit-linear-gradient(rgba(0,0,0, .7), rgba(255,255,255, .2));
	-webkit-transition: all .3s linear;
}
.button:hover{
	background: -webkit-linear-gradient(rgba(0,0,0, 1), rgba(255,255,255, .5));
}

Помогите, пожалуйста, с решением.