利用 CSS @property 探尋漸變的極限狀態

作者：SbCoco 2021-09-01 08:32:13

本文利用 CSS @property 來實現一些有意思的事情。我們都知道，在之前，我們想實現漸變的動畫，其實是非常復雜甚至是做不到的。

[[420813]]

本文利用 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，讓不可能變可能[1]

利用 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%; 
    } 
}