利用 CSS @property 探寻渐变的极限状态

Open chokcoco opened this issue 4 years ago • 0 comments

本文利用 CSS @property 来实现一些有意思的（但可能毫无卵用）事情。

渐变动画的历史

我们都知道，在之前，我们想实现渐变的动画，其实是非常复杂甚至是做不到的。

例如，从下图 A 状态，到 B 状态：

<div></div>

div {
    width: 300px;
    height: 150px;
    animation: gradientChange 5s infinite linear;
}
@keyframes gradientChange {
    from {
        background: linear-gradient(black, deeppink);
    }
    to {
        background: linear-gradient(green, blue);
    }
}

我们无法得到补间动画，只能得到两帧动画的切换：

而有了 CSS @property 之后，我们可以非常轻松的实现渐变直接的动画效果，只需要这样改造一下代码：

@property --colorA {
    syntax: "<color>";
    inherits: false;
    initial-value: black;
}
@property --colorB {
    syntax: "<color>";
    inherits: false;
    initial-value: deeppink;
}
div {
    width: 300px;
    height: 150px;
    background: linear-gradient(var(--colorA), var(--colorB));
    animation: propertyChange 4s infinite linear;
}
@keyframes propertyChange {
    from {
        --colorA: black;
        --colorB: deeppink;
    }
    to {
        --colorA: green;
        --colorB: blue;
    }
}

可以非常轻松的得到渐变的变化动画效果：

对于 CSS @Property 还不算太了解的，可以猛击这篇文章：CSS @property，让不可能变可能

利用 CSS @property 探寻渐变的极限状态

基于此，我们就可以利用 CSS @property 来搞事了。

我们可以利用它，观察渐变的一些极限状态。看看到渐变粒度非常小的时候，会发生什么，它的变化状态又是如何的。

主要是利用多重线性渐变、多重径向渐变、多重角向渐变。

多重线性渐变

它们的代码其实都大同小异：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

body {
    background: repeating-linear-gradient(45deg, deeppink, #fc0, #000, red, green, gray var(--per));
    animation: perChange 60s infinite linear;
    cursor: pointer;

    &:hover {
        animation-play-state: paused;
    }
}

@keyframes perChange {
    5% {
        --per: 1%;
    }
    10% {
        --per: .1%;
    }
    30% {
        --per: .01%;
    }
    50% {
        --per: .001%;
    }
    70% {
        --per: .0001%;
    }
    78% {
        --per: .00001%;
    }
    90% {
        --per: .000001%;
    }
    95%,
    100% {
        --per: .0000001%;
    }
}

通过控制多重线性渐变的没份的百分比 --per，观察动画的变化：