对于 background 相关的，文档里写的是支持 background 但是没有细说不支持 background: linear-gradient()/radial-gradient() 。
那么是否我们想要的背景色渐变动画就无法实现了呢?下面我们就发散下思维看看有没有其他方式可以达到我们的目标。
通过 background-position 模拟渐变动画
上面哪些 CSS 属性可以动画的截图中，列出了与 background 相关还有 background-position，也就是 background-position 是支持动画的，通过改变 background-position 的方式，可以实现渐变动画：
- div {
- background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
- background-size: 200% 100%;
- background-position: 0 0;
- animation: bgposition 2s infinite linear alternate;
- }
- @keyframes bgposition {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: 100% 0;
- }
- }
这里我们还配合了 background-size。首先了解下：
- background-position：指定图片的初始位置。这个初始位置是相对于以 background-origin 定义的背景位置图层来说的。
- background-size：设置背景图片大小。当取值为百分比时，表示指定背景图片相对背景区的百分比大小。当设置两个参数时，第一个值指定图片的宽度，第二个值指定图片的高度。
通过 background-size: 200% 100% 将图片的宽度设置为两倍背景区的宽度，再通过改变 background-position 的 x 轴初始位置来移动图片，由于背景图设置的大小是背景区的两倍，所以 background-position 的移动是由 0 0 -> 100% 0 。
通过 background-size 模拟渐变动画
既然 background-position 可以，那么另一个 background-size 当然也是不遑多让。与上面的方法类似，只是这次 background-position 辅助 background-size ，CSS 代码如下：
- div {
- background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
- background-position: 100% 0;
- animation: bgSize 5s infinite ease-in–out alternate;
- }
- @keyframes bgSize {
- 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%，会导致动画最左侧的颜色不变，像下面这样，不大自然：
