CSS background (gradient) transition not working - css

Question

The CSS transition on my a tag isn't fading in and out, its just like there's no transition at all! I tried using transition: background 300ms ease-in-out; too but still no luck
CSS:
.FeatureRow a{
padding: 10px;
display: block;
width: 260px;
height: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 8px #f5f5f5;
-moz-box-shadow: 0px 4px 8px #f5f5f5;
box-shadow: 0px 4px 8px #f5f5f5;
background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
background-repeat: repeat-x;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
background-image: -moz-linear-gradient(top,#C00,#C0F);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#C00),to(#C0F));
background-image: -webkit-linear-gradient(top,#C00,#C0F);
background-image: -o-linear-gradient(top,#C00,#C0F);
background-image: linear-gradient(to bottom,#C00,#C0F);
}

Answer 1

As Adrift says, this is not supported; you have to simulate it.
This is the CSS
.FeatureRow {
padding: 10px;
display: block;
position: relative;
width: 260px;
height: 70px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-image: linear-gradient(0deg,white,gray);
}
.FeatureRow:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: linear-gradient(0deg,red,magenta);
opacity: 0;
transition: all 3s ease-in-out;
}
.FeatureRow:hover:after {
opacity: 1;
}
We are overlaying your div with a pseudo element. Each one has a gradient. The pseudo element has opacity set to 0; when you hover it you change the opacity to 1; and this property can be transitioned.
demo

Answer 2

As noted in other answers, it is not possible to animate a gradient. It is however possible to animate background-color. Knowing this, you can layer a transparent gradient on top of a background color, which will allow you to animate one of the colors in your gradient.
To do this, choose the color you want to animate, set it as the background-color, and put rgba(0,0,0,0) (transparent) in its place.
Then all you have to do is on :hover or with javascript change background-color to your desired value
This will only work to transition one color of your gradient. But I think it's still a decent option to transition a gradient
.squareTile {
background: radial-gradient(#203244eb, rgba(0,0,0,0), #203244eb);
background-color: #3596ff;
border-radius: 10px;
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
transition: 1s;
}
.squareTile:hover {
background-color: #77c577;
}
<div class="squareTile">
</div>

Answer 3

Using gradients for animations (or transitions) is unfortunately not supported by any browser at the moment. Take a look at this list in the Transitions module for a list of all current animatible properties

Answer 4

animating a background gradient is possible, as mentioned, and there's a quite good tool currently up to let you play with the feature:
https://www.gradient-animator.com/
example output:
.css-selector {
background: linear-gradient(270deg, #8ccebd, #146e57);
background-size: 400% 400%;
animation: AnimationName 5s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}