扫一扫分享
AnimXYZ 可帮助您为网站创建、自定义和合成动画。由 css 变量提供支持,允许几乎无限数量的独特动画而无需编写单个关键帧。
节省时间并完全控制元素的移动方式。为 vue、react、SCSS 和 CSS 构建,AnimXYZ 将使您的网站栩栩如生。
例如,你可以通过编写 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 来反转错开,所以现在它将从右到左错开。
手机预览