使用带有渐变背景的 CSS3 过渡

Question

我正在尝试使用 css 在缩略图上进行悬停转换，以便在悬停时，背景渐变淡入。转换不起作用，但如果我只是将其更改为 rgba() 值，它可以工作美好的。不支持渐变吗？我也尝试使用图像，它也不会转换图像。

我知道这是可能的，就像在另一篇文章中那样，有人做到了，但我不知道到底是怎么回事。任何帮助>这里有一些 CSS 可以使用：

 #container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

原文由 alt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

渐变还不支持过渡（尽管当前规范说它们应该通过插值支持类似渐变到类似渐变的过渡。）。

如果您想要具有背景渐变的淡入效果，则必须在容器元素上设置 不透明度 并“过渡”不透明度。

（有一些浏览器版本支持渐变过渡（例如 IE10。我在 2016 年在 IE 中测试了渐变过渡，它们当时似乎可以工作，但我的测试代码不再有效。）

更新：2018 年 10 月，具有未加前缀的新语法 [例如径向渐变（…）] 的渐变过渡现在已确认（再次？）在 Microsoft Edge 17.17134 上工作。我不知道这是什么时候添加的。仍然无法在最新的 Firefox 和 Chrome / Windows 10 上运行。

更新：2021 年 12 月 这现在可以在最近使用 @property 解决方法的基于 Chromium 的浏览器中实现（但在 Firefox 中不起作用）。请在下面查看 @mahozad 的答案。

原文由 Michael Mullany 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一种解决方法是转换背景位置以产生渐变变化的效果：http: //sapphion.com/2011/10/css3-gradient-transition-with-background-position/

具有背景位置的 CSS3 渐变过渡

虽然不能直接使用 CSS transition 属性设置渐变动画，但可以设置 background-position 属性以实现简单的渐变动画：

代码非常简单：

 #DemoGradient{
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);
    background: -moz-linear-gradient(#C7D3DC,#5B798E);
    background: -o-linear-gradient(#C7D3DC,#5B798E);
    background: linear-gradient(#C7D3DC,#5B798E);

    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;

    background-size:1px 200px;
    border-radius: 10px;
    border: 1px solid #839DB0;
    cursor:pointer;
    width: 150px;
    height: 100px;
}
#DemoGradient:Hover{
    background-position:100px;
}

 <div id="DemoGradient"></div>

原文由 Alan 发布，翻译遵循 CC BY-SA 3.0 许可协议