Я знаю, что этот вопрос довольно старый, но я нашел хороший способ оживить базовые градиенты, которые будут работать в некоторых случаях.
Этот метод позволит вам анимировать изменение цвета градиента, но не изменение положения цвета прекращается.
https://jsfiddle.net/62vzydeh/
HTML:
CSS:
.button {
width: 200px;
height: 30px;
margin: 50px;
padding-top: 10px;
color: #C0C0C0;
background: linear-gradient(to left, #F8F8F8, transparent 30%);
background-color: #808080;
text-align: center;
font-family: sans-serif;
cursor: pointer;
transition: background-color 500ms;
}
.button:hover {
background-color: #A0A0A0;
}