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

 

AnimXYZ 是个可工具一个 CSS 动画库，用于为你的用于网站创建自定义 CSS 动画。是和合什么让 AnimXYZ 如此之好，它是的动画可组合的，这意味着你可以组合和混合不同的可组动画来创建自己的高度可定制的 CSS 动画，而无需编写一个单一的个可工具关键帧。

制作动画就像用文字描述一样简单

例如，用于你可以通过编写 xyz = "fade big up" 来创建动画，和合该动画可以使用 AnimXYZ 淡入淡出，的服务器托管动画按比例放大和向上移动。可组

AnimXYZ 还有一个小软件包，个可工具基本功能是用于 2.68kb ，如果包含方便的和合实用程序，则是的动画 11.4kb 。

可定制性

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 的元素同时淡入。

错位动画

如果我们不想让嵌套动画同时发生，我们很幸运，因为 AnimXYZ 也支持错位动画，这意味着如果我们有一个嵌套动画，我们可以让每个元素一个接一个地到达/离开。我们可以通过在 xyz 属性中添加 stagger 来实现这一点，这将使动画从左到右错开，我们也可以通过使用 stagger-rev 来反转错开，所以现在它将从右到左错开。云服务器

很赞哦!（46）