一個可用于React、Vue、純HTML和CSS的可組合CSS動畫工具包— AnimXYZ
AnimXYZ 是一個 CSS 動畫庫，用于為你的網(wǎng)站創(chuàng)建自定義 CSS 動畫。是什么讓 AnimXYZ 如此之好，它是可組合的，這意味著你可以組合和混合不同的動畫來創(chuàng)建自己的高度可定制的 CSS 動畫，而無需編寫一個單一的關(guān)鍵幀。
制作動畫就像用文字描述一樣簡單
例如，你可以通過編寫 xyz = "fade big up" 來創(chuàng)建動畫，該動畫可以使用 AnimXYZ 淡入淡出，按比例放大和向上移動。
AnimXYZ 還有一個小軟件包，基本功能是 2.68kb ，如果包含方便的實用程序，則是 11.4kb 。
可定制性
AnimXYZ 是由 CSS 變量驅(qū)動的，AnimXYZ 允許你覆蓋任何一個 CSS 變量來進一步定制/控制動畫和幾乎無限數(shù)量的自定義動畫。
你可以通過在你的 CSS 中選擇帶有 xyz 屬性的元素來編輯一個 AnimXYZ CSS 變量，并改變一個已定義的 AnimXYZ 變量的值，就像這樣：
- .my-class-name {
- --xyz-opacity: 0.5;
- }
所有 AnimXYZ 變量的開頭都帶有 xyz 前綴，然后通常后面跟隨 CSS 屬性名稱。
嵌套動畫
AnimXYZ 支持嵌套動畫，這允許我們在我們的動畫元素（帶有 xyz 屬性的元素）中包裹多個元素來制作動畫。嵌套動畫看起來像這樣：
- <div class="my-class-name" xyz="fade">
- <div class="xyz-in">Hello</div>
- <div class="xyz-in">Hello</div>
- <div class="xyz-in">Hello</div>
- </div>
這將使所有包裹著 .my-name-element 的元素同時淡入。
錯位動畫
如果我們不想讓嵌套動畫同時發(fā)生，我們很幸運，因為 AnimXYZ 也支持錯位動畫，這意味著如果我們有一個嵌套動畫，我們可以讓每個元素一個接一個地到達/離開。我們可以通過在 xyz 屬性中添加 stagger 來實現(xiàn)這一點，這將使動畫從左到右錯開，我們也可以通過使用 stagger-rev 來反轉(zhuǎn)錯開，所以現(xiàn)在它將從右到左錯開。
