[[420813]]

本文利用 CSS @property 來實現(xiàn)一些有意思的(但可能沒什么用的)事情。

漸變動畫的歷史

我們都知道，在之前，我們想實現(xiàn)漸變的動畫，其實是非常復(fù)雜甚至是做不到的。

例如，從下圖 A 狀態(tài)，到 B 狀態(tài)：

<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); 
    } 
} 

我們無法得到補(bǔ)間動畫，只能得到兩幀動畫的切換：

而有了 CSS @property 之后，我們可以非常輕松的實現(xiàn)漸變直接的動畫效果，只需要這樣改造一下代碼：

@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 探尋漸變的極限狀態(tài)

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

我們可以利用它，觀察漸變的一些極限狀態(tài)。看看到漸變粒度非常小的時候，會發(fā)生什么，它的變化狀態(tài)又是如何的。

主要是利用多重線性漸變、多重徑向漸變、多重角向漸變。

多重線性漸變

它們的代碼其實都大同小異：

@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，觀察動畫的變化：

我們還可以通過 hover 偽類，在 hover 元素的時候添加 animation-play-state: paused 以暫停動畫。

多重徑向漸變

和上述代碼一樣，只需要把 repeating-linear-gradient() 改為 repeating-radial-gradient() 即可。

最終的動畫效果：

這里還有兩張演示圖：

多重角向漸變

和上述代碼一樣，只需要把 repeating-linear-gradient() 改為 repeating-conic-gradient() 即可。

最終的動畫效果：

由于完整的變化圖片超出了限制，我只能每秒截取了 3 幀，所以看起來非常卡頓，實際是非常流暢的，補(bǔ)充一個完整的 5 秒的變化：

可以看到，在 --per 逐漸變小的過程中，整個漸變圖形呈現(xiàn)出了非常有意思的效果，在小于 0.1% 基本已經(jīng)處于一種非常抽象看不懂的狀態(tài)，在小于 0.00001% 后，圖形已經(jīng)無法被渲染出來了。

上述完整的代碼，你可以戳這里：CSS 靈感 -- 利用 CSS @property 探尋漸變的極限效果[2]

基于此，其實還可以做很多有意思的事情，譬如實現(xiàn)一個電視的雪花效果：

CSS 靈感 -- 利用漸變及 CSS Property 實現(xiàn) TV 噪音動畫[3]

CSS @property 其實非常強(qiáng)大，本文只是介紹它的冰山一角，旨在讓大家淺顯的了解有這么個東西，在 CSS 動畫的過程中如果發(fā)現(xiàn)有一些本身不支持的動畫的屬性，可以考慮利用 CSS @proerpty，巧妙的實現(xiàn)它~

最后

好了，本文到此結(jié)束，希望對你有幫助 :)

參考資料

[1]CSS @property，讓不可能變可能:

https://github.com/chokcoco/iCSS/issues/109

[2]CSS 靈感 -- 利用 CSS @property 探尋漸變的極限效果:

https://csscoco.com/inspiration/#/./background/css-property-variable-bg-change-animation.md

[3]CSS 靈感 -- 利用漸變及 CSS Property 實現(xiàn) TV 噪音動畫:

https://csscoco.com/inspiration/#/./background/background-css-property-tv-noise

[4]CSS 靈感:

https://csscoco.com/inspiration/#/

[5]Github -- iCSS:

https://github.com/chokcoco/iCSS