How to make animation for gradient with transparency?

Question

css

I can not find a solution to one interesting moment.
Task :
Make a gradient button with different levels of transparency (for example, top 70%, bottom 20%), the transparency should change on hover (100%, 50%). The transition must be animated.
But with a gradient animation does not work for me.

.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));
}

Help, please, with the decision.

Answer 1

Put down only prefixes the rest jsfiddle.net/A8Kq9

Answer 2

You can try using shadows or pseudo-elements: codepen.io/yoksel/pen/hqgyw/.
In the first case, the shadow is animated, in the second - the transparency of the layer.