本文主要講講 CSS 非常新的一個特性，CSS @property，它的出現，極大的增強的 CSS 的能力！
根據 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允許開發者顯式地定義他們的 CSS 自定義屬性，允許進行屬性類型檢查、設定預設值以及定義該自定義屬性是否可以被繼承。
<code>CSS Houdini</code> 又是什麼呢，<code>CSS Houdini</code> 開放 CSS 的底層 API 給開發者，使得開發者可以通過這套接口自行擴充 CSS，并提供相應的工具允許開發者介入浏覽器渲染引擎的樣式和布局流程中，使開發人員可以編寫浏覽器可以解析的 CSS 代碼，進而建立新的 CSS 功能。當然，它不是本文的重點，不過多描述。
<code>CSS Property</code> 如何使用呢？我們将通過一些簡單的例子快速上手，并且着重介紹它在 CSS 動畫中起到的關鍵性的作用，對 CSS 動畫帶來的巨大提升。
正常而言，我們定義和使用一個 CSS 自定義屬性的方法是這樣的：
而有了 <code>@property</code> 規則之後，我們還可以像下述代碼這樣去定義個 CSS 自定義屬性：
簡單解讀下：
<code>@property --property-name</code> 中的 <code>--property-name</code> 就是自定義屬性的名稱，定義後可在 CSS 中通過 <code>var(--property-name)</code> 進行引用
syntax：該自定義屬性的文法規則，也可以了解為表示定義的自定義屬性的類型
inherits：是否允許繼承
initial-value：初始值
其中，<code>@property</code> 規則中的 syntax 和 inherits 描述符是必需的。
當然，在 JavaScript 内定義的寫法也很簡單，順便一提：
<code>syntax</code> 支援的文法類型非常豐富，基本涵蓋了所有你能想到的類型。
length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident (a custom identifier string)
定義的 CSS <code>@property</code> 變量的 syntax 文法接受一些特殊的類型定義。
<code>syntax: '<color#>'</code> ：接受逗号分隔的顔色值清單
<code>syntax: '<length+>'</code> ：接受以空格分隔的長度值清單
<code>syntax: '<length | length+>'</code>：接受單個長度或者以空格分隔的長度值清單
OK，鋪墊了這麼多，那麼為什麼要使用這麼麻煩的文法定義 CSS 自定義屬性呢？CSS Houdini 定義的自定義變量的優勢在哪裡？下面我們一一娓娓道來。
我們來看這樣一個例子，我們有這樣一個漸變的圖案：
我們改造下上述代碼，改為使用 CSS 自定義屬性：
得到的還是同樣的一個漸變圖：
我們再加上一個過渡效果：
看看滑鼠 Hover 的時候，會發生什麼：
雖然我們設定了 1s 的過渡動畫 <code>transition: 1s background</code>，但是很可惜，CSS 是不支援背景漸變色的直接過渡變化的，我們得到的隻是兩幀之間的之間變化。
OK，接下來我們就是有本文的主角，使用 Houdini API 中的 CSS 自定義屬性替換原本的 CSS 自定義屬性。
簡單進行改造一下，使用 <code>color</code> syntax 文法類型：
我們使用了 <code>@property</code> 文法，定義了兩個 CSS Houdini 自定義變量 <code>--houdini-colorA</code> 和 <code>--houdini-colorB</code>，在 hover 變化的時候，改變這兩個顔色。
需要關注的是，我們設定的過渡語句 <code>transition: 1s --houdini-colorA, 1s --houdini-colorB</code>，在這裡，我們是針對 CSS Houdini 自定義變量設定過渡，而不是針對 <code>background</code> 設定過渡動畫，再看看這次的效果：
Wow，成功了，漸變色的變化從兩幀的逐幀動畫變成了補間動畫，實作了從一個漸變色過渡到另外一個漸變色的效果！而這，都得益于 CSS Houdini 自定義變量的強大能力！
CodePen Demo -- CSS Houdini 自定義變量實作漸變色過渡動畫
在上述的 DEMO 中，我們利用了 CSS Houdini 自定義變量，将原本定義在 <code>background</code> 的過渡效果嫁接到了 <code>color</code> 之上，而 CSS 是支援一個顔色變換到另外一個顔色的，這樣，我們巧妙的實作了漸變背景色的過渡動畫。
在之前我們有讨論過在 CSS 中有多少種方式可以實作漸變背景色過渡動畫 -- 巧妙地制作背景色漸變動畫！，到今天，我們又多了一種實作的方式！
完整的代碼可以戳這裡：
CodePen Demo -- CSS Houdini 自定義變量實作漸變色過渡動畫2
OK，上面我們示範了 <code>syntax</code> 為 <code>color</code> 文法類型的情況。在文章一開頭，我們還列舉了非常多的 <code>syntax</code> 類型。
下面我們嘗試下其他的類型，使用 <code>percentage</code> 百分比類型或者 <code>angle</code> 角度類型，實作一個餅圖的 hover 動畫。
如果我們還是使用傳統的寫法，利用角向漸變實作不同角度的餅圖：
将會得到這樣一種效果，由于 <code>conic-gradient</code> 也是不支援過渡動畫的，得到的是一幀向另外一幀的直接變化：
好，使用 CSS Houdini 自定義變量改造一下：
看看改造後的效果：
CodePode Demo -- conic-gradient 配合 CSS @property 實作餅圖動畫
以往使用純 CSS 非常複雜才能實作的效果，如果可以輕松的達成，不得不感慨 <code>CSS @property</code> 強大的能力！
順便示範一下定義 Houdini 自定義變量時 syntax 的一些稍微複雜點的用法。
在 <code>conic-gradient</code> 中，我們可以使用百分比也可以使用角度作為關鍵字，上述的 DEMO 也可以改造成這樣：
表示，我們的自定義屬性即可以是一個百分比值，也可以是一個角度值。
除了 <code>|</code> 符号外，還有 <code>+</code> 和 <code>#</code> 号分别表示接受以空格分隔、和以逗号分隔的屬性，感興趣的可以自行嘗試。
掌握了上述的技巧，我們就可以利用 Houdini 自定義變量的這個能力，去填補修複以前無法直接過渡動畫的一些效果了。
過去，我們想實作這樣一個文字下劃線的 Hover 效果：
因為 <code>text-underline-offset</code> 不支援過渡動畫，得到的結果如下：
使用 Houdini 自定義變量改造，化腐朽為神奇：
可以得到絲滑的過渡效果：
CodePen Demo - Underlines hover transition(Chrome solution with Houdini)
嗯，因為 CSS @property 的存在，讓以前需要非常多 CSS 代碼的工作，一下子變得簡單了起來。
我們嘗試利用 <code>CSS @property</code> 配合 background，簡單的實作一個屏保動畫。
我們利用 <code>background</code> 可以簡單的得到這樣一個圖形，代碼如下：
效果如下，還算可以的靜态背景圖：
在往常，我們想讓它動起來，其實是需要費一定的功夫的，而現在，通過 <code>CSS @property</code>，對我們希望進行動畫的一些元素細節進行改造，可以得到非常不錯的動畫效果：
效果如下（因為 Gif 上傳大小限制，加快了速率，截取了其中一部分，簡單做個示意）:
整體的效果還是挺不錯的，完整的 Demo 你可以戳這裡：
CodePen Demo -- CSS @property PureCSS Wrapper
CSS Properties and Values API Level 1
好了，本文到此結束，介紹了 CSS Houdini API 中的 CSS @property 部分，并且利用它實作了一些以往無法簡單實作的動畫效果，希望對你有幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。