当前位置: 首页 > 科技观察

用于React、Vue、纯HTML和CSS的可组合CSS动画工具包—AnimXYZ

时间:2023-03-20 22:14:18 科技观察

AnimXYZ是一个CSS动画库,用于为您的网站创建自定义CSS动画。AnimXYZ如此出色的原因在于它是可组合的,这意味着您可以组合和混合不同的动画来创建您自己的高度可定制的CSS动画,而无需编写单个关键帧。动画就像用文字描述一样简单。例如,您可以通过使用AnimXYZ编写淡入、放大和向上移动的xyz="fadebigup"来创建动画。AnimXYZ也有一个小包,2.68kb用于基本功能,或11.4kb(如果包含方便的实用程序)。可定制性AnimXYZ由CSS变量驱动,AnimXYZ允许您覆盖任何一个CSS变量以进一步自定义/控制动画和几乎无限数量的自定义动画。您可以通过在CSS中选择具有xyz属性的元素来编辑AnimXYZCSS变量,并更改已定义的AnimXYZ变量的值,如下所示:.my-class-name{--xyz-opacity:0.5;}AllAnimXYZ变量以xyz前缀开头,通常后跟CSS属性名称。嵌套动画AnimXYZ支持嵌套动画,它允许我们将多个元素包裹在我们的动画元素(具有xyz属性的元素)中以进行动画处理。嵌套动画如下所示:Hello

Hello
Hello
这将使包裹在.my-name-element周围的所有元素同时淡入。交错动画如果我们不希望嵌套动画同时发生,我们很幸运,因为AnimXYZ也支持交错动画,这意味着如果我们有嵌套动画,我们可以让每个元素在其他。我们可以通过在xyz属性中添加一个交错来做到这一点,这将使动画从左到右交错,我们也可以通过使用stagger-rev来反转交错,所以现在它将从右到左交错。