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

Question

[MikePVK]

Не могу найти решения одного интересного момента.
Задача:
Сделать градиентную кнопку с разными уровнями прозрачности (например, сверху 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));
}

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

Answer 1

[Alexander Mischuk]

Проставишь только префиксы остальные jsfiddle.net/A8Kq9

Comments

[MikePVK]

Спасибо огромное

Answer 2

[yoksel]

Можно попробовать использовать тени или псевдоэлементы: codepen.io/yoksel/pen/hqgyw/.
В первом случае анимируется тень, во втором - прозрачность слоя