通过本文，你可以学习4种不同方式的纯CSS制作的渐变背景转场动画。有时候，我们可能需要如下动画效果，渐变背景色的过渡动画：渐变背景的过渡动画假设我们的渐变是这么写的：div{background:linear-gradient(90deg,#ffc7000%,#e91e1e100%);}按照常规思维，有了动画，我们首先想到的是在动画步骤中改变颜色来实现颜色渐变动画，那么我们的CSS代码可能是：div{background:linear-gradient(90deg,#ffc7000%,#e91e1e100%);animation:gradientChange2sinfinite;}@keyframesgradientChange{100%{//渐变中的颜色变了background:linear-gradient(90deg,#e91e1e0%,#6f27b0100%);}}我们用了上面三种颜色:#ffc700Yellow#e91e1eRed#6f27b0Purple终于没有预期的结果了，不过这个：CodePenDemo-linear-graidenttransformation的动画效果[1]我们期待的过渡动画变成了逐帧动画。也就是说，线性渐变不支持animation动画。简单地从一种颜色更改为另一种颜色怎么样？像这样：div{background:#ffc700;animation:gradientChange3sinfinitealternate;}@keyframesgradientChange{100%{background:#e91e1e;}}我们发现简单的单色渐变可以在值之间发生变化：一些单色渐变的属性不支持直接过渡动画片。综上所述，线性渐变（径向渐变、角度渐变）不支持动画，支持单色背景。查了一下文档，靠近背景的区域截图如下：哪些CSS属性可以被动画化？[2]、以上截图为不完整的支持CSS动画的属性，完整的可以点击左侧。关于背景，文档里写着支持背景，但是没有说明不支持背景：linear-gradient()/radial-gradient()。那么我们想要的背景色渐变动画是不是实现不了呢？接下来我们发散一下思路，看看有没有其他方法可以达到我们的目的。通过background-position模拟渐变动画在上面css属性可以动画的截图中，列出了background-related和background-position，即background-position支持动画。通过改变background-position的方式，可以实现gradientAnimation:div{background:linear-gradient(90deg,#ffc7000%,#e91e1e50%,#6f27b0100%);background-size:200%100%;background-position:00;animation:bgposition2sinfinitelinearalternate;}@keyframesbgposition{0%{background-position:00;}100%{background-position:100%0;}}这里我们也配合background-size。首先了解一下：background-position：指定图片的初始位置。这个初始位置是相对于background-origin定义的背景位置层。background-size：设置背景图像的大小。当值为百分比时，表示指定背景图片相对于背景区域的百分比大小。当设置两个参数时，第一个值指定图像的宽度，第二个值指定图像的高度。通过background-size:200%100%将图片的宽度设置为背景区域宽度的两倍，然后通过改变background-positionx轴的初始位置来移动图片，因为size背景图像是背景区域大小的两倍，因此背景位置从00->100%0移动。通过background-size模拟渐变动画既然background-position很好，其他的background-size当然也不能太多。与上述方法类似，但这次background-position辅助background-size，CSS代码如下：div{background:linear-gradient(90deg,#ffc7000%,#e91e1e33%,#6f27b066%,#00ff88100%);background-position:100%0;animation:bgSize5sinfiniteease-in-outalternate;}@keyframesbgSize{0%{background-size:300%100%;}100%{background-size:100%100%;}}CodePen--Demo----position-size实现渐变动画[3]通过改变background-size的第一个值，我将背景图片的大小从背景区域的3倍大小改为背景区域的1倍大小。在背景图片变换的过程中，正好有一个动画效果。至于为什么要搭配background-position:100%0。是因为如果不设置background-position，默认值为0%0%，会导致动画最左边的颜色保持不变，如下，不太自然：通过transform模拟渐变动画虽然以上两种方法都是可以实现的，但是总感觉自由度不够，或者说随机性不够大。不仅如此，以上两种方法，因为使用了background-position和background-size，并且在gradient中改变这两个属性，导致页面不断的大量重绘，对页面性能消耗很大，所以我们也可以试试transform的方法：通过下面的方式，使用带有transform的伪元素进行渐变动画，通过元素前后的伪元素在元素内部绘制一个大背景，然后对伪元素进行变换元素通过变换：div{position:relative;overflow:hidden;width:100px;height:100px;margin:100pxauto;border:2pxsolid#000;&::before{content:"";position:absolute;top:-100%；左：-100%；下：-100%；右：-100%；背景：线性渐变（45deg，#ffc7000%，#e91e1e50%，#6f27b0100%）；背景大小：100%100%；动画：bgposition5sinfinitelinearalternate;z-index:-1;}}@keyframesbgposition{0%{transform:translate(30%,30%);}25%{transform:translate(30%,-30%);}50%{transform:translate(-30%,-30%);}75%{transform:translate(-30%,30%);}100%{transform:translate(30%,30%);}}实现原理如图下图：CodePen--Demo--伪元素配合transform实现背景渐变[4]以上列举的方法只是其中的一部分方法。理论上，可以将伪元素与可以产生位移或变形的属性结合起来，达到上述效果。我们甚至可以使用不同的缓动函数或学习蝉原理来创建非常随机的效果。当然本文列举的方法都是纯CSS的方法，也可以用SVG或者Canvas来制作，性能更好。有兴趣的读者可以自行研究。通过滤镜hue-rotate实现渐变动画（更新于2019/04/06）下面的方法可谓新时代利器。通过滤镜hue-rotate，很方便的实现背景色渐变动画，过渡效果也很自然，代码量也少，堪称黑科技：div{background:linear-渐变（45deg，#ffc107，deeppink，#9c27b0）；动画：hueRotate10sinfinitealternate；}@keyframeshueRotate{0{filter：hue-rotate（0）；}100%{filter：hue-rotate（360deg）；}}CodePenDemo--hue-rotate实现背景渐变动画[5]使用CSS@property实现背景色渐变动画直到今天（2021/04/15），我们也可以使用CSS@property实现背景色渐变动画，其外观，大大增强了CSS的能力！根据MDN--CSSProperty[6]，@propertyCSSat-rule是CSSHoudiniAPI的一部分，它允许开发人员显式定义他们的CSS自定义属性，允许属性类型检查、设置默认值和定义自定义属性是否可以继承。@property--colorA{syntax:'
