为什么过渡属性不适用于此线性渐变？

Question

我已经包含了一个 jsfiddle 来简化它。问题是当鼠标悬停在箭头上时，过渡没有按预期进行动画处理。

.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/

Answer 1

linear-gradient 的工作方式与 background-image 类似，您如何阅读 here、background-image 不是 动画化的 .

这很明显，因为没有标准的方法来为 background-image 设置动画。你可能想用淡入效果或 向左滑动 效果来制作动画，这是模棱两可的，我不明白为什么你说不行"as expected"。预期是什么？

您应该利用其他属性的设置转换，例如 opacity 或 width。

这是在 background-image 属性上实现淡入淡出效果的简单方法，使用 ::after 伪元素：

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

从 .spotlight-next 中删除 transition 和 background-image 属性以使其正常工作。

为什么过渡属性不适用于此线性渐变？

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

css

linear-gradients

为什么过渡 属性 不适用于此线性渐变？

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

css

linear-gradients

为什么过渡属性不适用于此线性渐变？