CSS background (gradient) transition not working

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

Solution 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

Solution 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>

Solution 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

Comments

[Blease]

Is it possible to use a background image and then use a transition to "overwrite" the image with just background-color?

[Adrift]

You unfortunately can't do that either because background-images aren't animatible. Take a look at the list in my answer.

[andreszs]

Great.. this proves that all these new CSS3 tricks are becoming as complex as useless.

[Tim Mackey]

This is actually quite a clever answer. It won't work in very situation of course, but way to think outside the box!

[Seth B]

This does not work for buttons unfortunately

[Okym]

appreciate it man this worked for me!

[Dremiq]

@SethB it does work, if the problem you are having is the text being hidden behind a background, make sure you put z-index: 1 on your btn, and z-index: -1 on your :after