[[375287]]

AnimXYZ 是一個 CSS 動畫庫，用于為你的網站創(chuàng)建自定義 CSS 動畫。是什么讓 AnimXYZ 如此之好，它是可組合的，這意味著你可以組合和混合不同的動畫來創(chuàng)建自己的高度可定制的 CSS 動畫，而無需編寫一個單一的關鍵幀。

制作動畫就像用文字描述一樣簡單

例如，你可以通過編寫 xyz = "fade big up" 來創(chuàng)建動畫，該動畫可以使用 AnimXYZ 淡入淡出，按比例放大和向上移動。

AnimXYZ 還有一個小軟件包，基本功能是 2.68kb ，如果包含方便的實用程序，則是 11.4kb 。

[[375288]]

可定制性

AnimXYZ 是由 CSS 變量驅動的，AnimXYZ 允許你覆蓋任何一個 CSS 變量來進一步定制/控制動畫和幾乎無限數量的自定義動畫。

你可以通過在你的 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 的元素同時淡入。

[[375289]]

錯位動畫

如果我們不想讓嵌套動畫同時發(fā)生，我們很幸運，因為 AnimXYZ 也支持錯位動畫，這意味著如果我們有一個嵌套動畫，我們可以讓每個元素一個接一個地到達/離開。我們可以通過在 xyz 屬性中添加 stagger 來實現這一點，這將使動畫從左到右錯開，我們也可以通過使用 stagger-rev 來反轉錯開，所以現在它將從右到左錯開。

[[375290]]