Why isn't the transition property working on this linear gradient?

Question

I have included a jsfiddle to simplify this. The problem is that when the mouse hovers on the arrows, the transition is not animating as expected.

.spotlight-next {
  transition: background 0.5s ease-out;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

.spotlight-next:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}

https://jsfiddle.net/yashiman/jqq3u1nz/2/

tip: instead of the fiddle you can use the embedded html+css(+js) engine. question: what do you expect? — Edwin, Apr 26 '18 at 11:50

Christian Vincenzo Traina · Accepted Answer · 2018-04-26T12:01:35.617

linear-gradient works like background-image, and how you can read here, background-image is not animatable.

This is pretty obvious, because there's no a standard way to animate a background-image. You could want to animate it with a fade-in effect or with a swipe-left effect, this is ambigous and I don't understand why you say it doesn't work "as expected". What was expected?

You should leverage on setting transition for other properties, like opacity or width.

This is an easy way to implement a fade effect on the background-image property, using the ::after pseudo-element:

.spotlight-next::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease-out;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  opacity: 0.1;
  z-index: -1;
}
.spotlight-next:hover::after {
  opacity: 1;
}

remove transition and background-image property from .spotlight-next in order to make it work.

I was trying to get a smooth fade on hover, but I guess opacity animations should do the trick. Thanks — Yash A, Apr 26 '18 at 11:54

Why isn't the transition property working on this linear gradient?

1 Answers1