为何transition属性在linear-gradient上无法正常生效？

嗨，我来帮你搞定这个渐变过渡的问题～

你遇到的核心问题是：CSS的transition属性默认不支持linear-gradient这类背景渐变的直接过渡——因为渐变属于「图像类」属性值，浏览器无法对两个不同的渐变进行插值计算，所以hover时的渐变变化会直接跳变，没有平滑过渡效果。

下面给你一个简单可靠的解决方案，用伪元素+opacity来模拟渐变的平滑过渡：

修改后的CSS代码 #

.spotlight-next {
  /* 保留你原有的其他样式，新增相对定位 */
  position: relative;
  /* 如果元素内有内容，记得加z-index确保内容在伪元素上方 */
  z-index: 1;
}

.spotlight-next::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 直接用hover时的深渐变作为伪元素背景 */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  /* 初始状态下降低透明度，模拟浅渐变效果 */
  opacity: 0.1;
  /* 给opacity添加过渡动画 */
  transition: opacity 0.5s ease-out;
  /* 把伪元素放在主元素下方，不遮挡内容 */
  z-index: -1;
}

.spotlight-next:hover::before {
  /* hover时将透明度拉满，显示深渐变 */
  opacity: 0.9;
}

方案原理 #

我们用伪元素单独承载深渐变背景，通过过渡opacity属性来模拟渐变深浅的变化——opacity是浏览器支持过渡的数值类型，这样就能实现平滑的hover动画效果啦。这个方法兼容性好，逻辑清晰，也不会影响你原有的元素布局和内容。

内容的提问来源于stack exchange，提问作者Yash A