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;…

Accepted Answer

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

CSS background (gradient) transition not working

Solution

Problem

Related problems