无法在Web上动画渐变。
是的，我知道这个说法不是真的，但是如果你是在CSS3时代工作的前端开发人员，那么你可能知道我至少有一半是对的。
我在谈论使用CSS动画（如过渡属性）在两个背景渐变之间进行动画，如下所示：
你可能认为这会起作用，对吗？错了。
现在，有很多解决方法，但通常它们都使用SVG或JavaScript来完成CSS无法实现的功能。在向你展示我认为是解决这个问题最快，最优雅的简单纯CSS解决方案之前，我将简要介绍它们。如果你急于想看它的实现效果，这里是一个链接（也在下面嵌入）。另外，Webucator的工作人员为这篇文章制作了一个精彩的教程视频，因为他们很棒。
JavaScript
使用JavaScript完成这项工作感觉很不对。这是因为渐变是在CSS领域中创建的样式，因此你的处理应该保留在CSS领域中。你可以争辩说，重度动画应该是JavaScript的工作，而不是CSS的工作，如果你正在使用渐变进行这些操作，那么可以通过很多 选项 实现。但是，对于两个渐变之间的简单过渡，你不需要编写脚本。
SVG
我们都知道，SVG是Web上图形和动画的黄金鹅。如果需要做正确的事情，就要使用SVG。包括渐变。现在，我将首先承认，对于通常从不接触SVG的开发人员来说，它们并不是很容易掌握。但是SVG是一种重要的Web技术，不会很快消失，所以偶尔尝试一下可以长期受益。使用SVG，你可以实现我们正在尝试做的事情以及更多其他内容。
CSS
现在我们回到CSS，顺便说一句，这是我们用来为网站其余部分设置样式的东西，它能够实现令人印象深刻（尽管通常很简单）的动画，并且我们已经熟悉它。让我们看看是否可以仅使用CSS（我们可以因为我们很棒）完成此操作。
简要介绍一下CSS渐变是什么？它是如何定义的？类似于以下内容（没有供应商前缀，因为90％的浏览器支持以下语法）：
好的，渐变是使用linear-gradient值（或radial-或repeating-）[创建的]。这很重要。渐变只是背景属性的值。如果你进一步深入，你将发现实际设置的是background-image属性。这就是使用CSS渐变进行动画处理的问题所在。让我们去访问W3Schools获取答案：
总是确保检查属性是否可以进行动画处理。我在和你说话，那些尝试从“display：none”转换到“display：block”的人，然后想知道为什么它不是平滑的淡入。
不可动画。这就是动画CSS渐变存在问题的原因。就像你无法从一个背景图像平稳地过渡到另一个背景图像一样，你也无法从一个CSS渐变平稳地过渡到另一个CSS渐变。它是二进制的。要么显示一个background-image，要么显示另一个。
但是，你可以有两个渐变，重叠在一起，然后转换顶部元素的不透明度。opacity属性是无处不在和可动画化的，非常适合此工作。
我要向你展示的方法利用了:before伪元素。当然，你可以添加一个附加元素到你的HTML中，但是为了保持我们的标记干净并将关注点分开，我更喜欢使用:before元素。
让我们从我们的主要元素开始。让我们给它一些基本样式和渐变（再次无供应商前缀）：
我在这里使用的是Less，但是普通的CSS也可以解决问题（如果你还停留在2005年）。
这里的重要部分是有一个具有渐变的元素，它的z-index设置为100。作为规则，我避免使用z-index，因为它会增加另一维复杂性，而在大多数项目中不需要存在。我在这里设置它的唯一原因是，任何放在我们元素内部的内容（例如文本）都将显示在伪元素前面，伪元素将具有遮挡元素内容的背景渐变。说到这里，让我们来为伪元素添加样式：
其中一些样式是纯粹的表现性样式（如 border-radius），并不是这个实验的关键。
这里的关键是，:before 元素具有我们想要过渡到的相反（或其他）渐变，它的 z-index 设置为负值，透明度设置为零。
我们将通过添加过渡和悬停状态来完成这个过程：
现在当我们悬停在 .button 上时，:before 元素（具有相反/不同的渐变）会平滑地淡入。非常棒的技巧，对吧？你可以在下面的 CodePen 实例中查看实际效果：
我所做的是将这个效果制作成可重用的混合器，然后将其应用于 <body> 元素，以创建一个有趣的效果，每当鼠标悬停在窗口上时。如果你想尝试一下，我已经为 Less 和 Sass 创建了混合器：
我仍然喜欢这个解决方案，因为 CSS 是我的老伙计。话虽如此，我仍然觉得 SVG 可能是“正确”的解决方案。有时在 CSS 中在两个渐变之间进行动画会导致颜色在某些浏览器中在过渡中变得有点混浊，这是我认为 SVG 处理得更好的事情。但我的意思是，你无法击败 CSS 的简易性，所以很难不采用这种方法。
译自：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
评论(0)