CSS 渐变背景动画的实现

我正在参加「AdminJS·启航计划」

前言

渐变是CSS函数，例如linear-gradient()可以创建一个沿着直线的两种或多种颜色之间的渐进过渡的背景图像，请注意这是一种特殊的图像。在CSS中background-image是支持离散型(distrete)动画的。详细的大家可以去看张大佬的博客：颠覆，原来background-image也是支持CSS动画的。

但是渐变作为背景图像的时候，他是特殊的图像。是不支持animation动画和transition过渡的！但是有时候我们还是想要给他添加动画，我们该怎么办！

一个常识：渐变是不能够使用通过keyframes实现动画过渡效果的，只会突然的改变颜色。

下面是个演示：可以看到的是渐变只是僵硬的切换，并不会平滑的过渡。

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(180deg, rgb(63, 47, 130) 0%, rgb(177, 111, 155) 100%);
    animation: 1s test linear infinite;

}

@keyframes test {
    from {
        background: linear-gradient(180deg, rgb(63, 47, 130) 0%, rgb(177, 111, 155) 100%);
    }

    to {
        background: linear-gradient(180deg, rgb(177, 111, 155) 0%, rgb(201, 14, 189) 100%);
    }
}

方法1-background-position

虽然渐变背景不支持，但是背景位置是支持的，所以我们可以改变渐变背景的位置来实现过渡。

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, rgb(63, 47, 130) 0%, rgb(177, 111, 155) 50%, rgb(201, 14, 189) 100%);
    animation: gradient 1s  linear infinite;

}

@keyframes gradient {

    to{
        background-position: 100px;
    }
}

方法2-自定义变量

如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！

声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {
  --bg-color: red;
}

通过var(--*)来使用，

但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。

于是CSS又增加了 @property 规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过 var()使用

有兴趣了解的同学，可以参考这篇文章带有类型和默认值的CSS变量

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

• syntax：=表示属性的类型
• inherits：是否允许继承
• initial-value：初始值

这个规则为什么可以应用到渐变动画的过渡/动画上呢？

在上个方案中，我们是针对渐变的位置进行动画的，而使用CSS 自定义变量则可以针对渐变的值进行修改。

给定渐变颜色的初始值，定义动画，改变颜色值。

@property --colorA {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(63, 47, 130);
}

@property --colorB {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(177, 111, 155);
}

@property --colorC {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(201, 14, 189);
}

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, var(--colorA) 0%, var(--colorB) 50%, var(--colorC) 100%);
    animation: gradient 2S linear infinite;
}

@keyframes gradient {
    50% {
        --colorA: rgb(201, 14, 189);
        --colorB: rgb(177, 111, 155);
        --colorC: rgb(63, 47, 130);
    }
}